css多个div在同一行;html两个div同一行

在html制作中,有时候需要对让多个<div>在同一行显示,这个要怎么实现呢。需要多个div在同一行,我们都知道div默认的宽是100%所以需要给div设置一个宽,然后使用浮动float属性进行让div显示在一行上。

操作方法

  • 01

    打开html开发软件,在html开发工具上新建一个html页面,用于实现多个div显示在同一行上。

  • 02

    在html代码页面上创建两个div标签,然后给这个两个div标签添加class类,案例中class类分别为:one,two。 创建div代码: <div class="one">第一个div</div> <div class="two">第二个div</div>

  • 03

    创建<style>标签,设置class类one,two样式。需要设置宽、高、浮动、边框以及box-sizing属性。 css样式代码: <style> .one,.two{ width: 50%; height: 300px; border:1px solid #ccc; float: left; box-sizing: border-box; } </style>

  • 04

    设置好class类属性后,保存html代码,然后使用浏览器打开,即可看到两个div标签显示在同一列上。

(0)

相关推荐

  • excel怎么将两列数据变成一行数据呢?

    excel 2007如何实现两列数据变成一行?对于刚接触excel表格的人来说,可能并不是很清楚,所以下面小编就为大家详细介绍一下,一起来学习吧! 1.如下图所示,将A.B两列转换成一行 2.首先,选 ...

  • excel怎么复制上一行公式? excel自动生成上一行的公式的教程

    excel作为较为常见的办公性质的软件,在进行数据处理的时候经常用到,本文从求和的应用为大家介绍,excel怎么让下一行自动生成上一行的公式? 1.本文以最简单的“加法运算”解释如何将上一行的公式运用 ...

  • excel:[4]excel如何实现两列数据变成一行

    excel 2007如何实现两列数据变成一行 操作方法 01 如下图所示,将A.B两列转换成一行 02 首先,选中B列,右击鼠标,选择"插入",在A和B列新增一列 03 在B2中输 ...

  • wps 文档打字打不满一行就自动换到下一行

    wps 文档打字打不满一行就自动换到下一行,有时我们复制的文档在粘贴到wps文档中时,打字打不满一行就自动换到下一行,让人十分头疼,现在就详细介绍一下如何改变这种现象. 操作方法 01 首先我们先复制 ...

  • word中怎么让两张图片放在同一行

    word中怎么让两张图片放在同一行?下面我们就来看一下具体的操作步骤吧. 操作方法 01 在电脑上新建一个word文档,然后开始打开文档进行操作. 02 找到word工具中的插入选项,找到图片,开始上 ...

  • WPS一行怎么打两行字_Word一行怎么显示两行小字

    在编辑Word文档的时候,有时候需要将两行并列的文字放在同一行显示,这时候该怎么输入呢?今天,小编就来给大家讲一讲怎么用WPS文字来实现 在同一行中输入两行文字(设置双行合一). 操作方法 01 首先 ...

  • css设置去掉滚动条依然可以滚动

    在一些前端开发过程中,有些区块显示滚动条会显示得特别难看(例如:左侧菜单栏显示一个滚动调),但是又需要有滚动的功能,这个时候怎么办呢?可以通过使用css进行设置隐藏滚动条依然可以滚动. 思路:创建一个 ...

  • 从何设置CSS,让多行嵌套DIV水平也能居中?

    CSS布局中,主要使用DIV来进行分块展示,让DIV内的元素水平居中,简单的设置text-align属性就可以,但是DIV内嵌套多行DIV居中又该如何呢?本文从简单到多行一步一步教您. 操作方法 01 ...

  • html/css如何让多个div标签水平排列?

    介绍在html/css中使多个标签(比如div)水平排列的两种方法比较.分别是float: left和display: inline-block. 操作方法 01 首先如图所示,我在html中放置了两 ...