• 新记

    • 在HTML中，如何让两个DIV在同一行显示?

    <div>
    <div>a</div>
    <div>b</div>
    </div>
    显示结果为：
    a
    b
    如何让显示结果为
    ab
    ？

    举报该文章
    相关建议   2018-05-22

    把两个div放在一个父div里面，然后进行浮动即可。

    下面我们一起来实现以下：

      创建一个父div，然后创建两个子div，代码如下：

      给div加上css样式，分别给他们设置背景颜色，父div可以不设置，子div设置绿色，然后给div加上浮动代码即可,"float:left"我们来写一下代码：

      下面我们来看一下运行效果

      DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。

    温馨提示：内容为网友见解，仅供参考
    其他看法
    第1个回答  2018-06-17

    在HTML中，让两个div在同一行显示的方法：

    1、使用浮动float

    代码：

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <title>div同行显示</title>

    <style type="text/css">

    #container{overflow: hidden;}/* 清除浮动 */

    #container div{width:200px;height:100px;}

    .box1{background: red;float: left;}

    .box2{background: green;float:left;}

    </style>

    </head>

    <body>

    <div id ="container">

    <div class="box1">box1</div>

    <div class="box2">box2</div>

    </div>

    </body>

    </html>

    效果：

    2、inline-block将这两个div变成内联-块状元素

    代码：

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <title>div同行显示</title>

    <style type="text/css">

    body{background: #ddd;}

    div{width:200px;height:100px;display: inline-block;}

    .box3{background: #e4007e;}

    .box4{background: blue;}

    </style>

    </head>

    <body>

    <div  class="box3">box3</div>

    <div  class="box4">box4</div>

    </body>

    </html>

    效果：

    本回答被网友采纳
    第2个回答  2018-05-23

    在HTML中，让两个DIV在同一行显示的方法是：

    1、在html页面新建一个新的html页面。

    2、在html代码页面上创建的两个div标签添加class类，假设class类分别为：one，two。

    创建div代码如下：

    <div class="one">第一个div</div>。

    <div class="two">第二个div</div>。

    3、创建<style>标签中的class类one，two样式。

    css样式代码如下：

    <style>

    .one,.two{

    width: 50%;

    height: 300px;

    border:1px solid #ccc;

    float: left;

    box-sizing: border-box;

    }

    </style>

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

    第3个回答  推荐于2017-09-29
    在HTML中，让两个DIV在同一行显示,就是通过float属性来设置的，我们可以通过设置3个div，然后第一个div包裹住其他2个div，然后在设置宽高就可以了，我提交一段代码：
    <html>
    <head>
    <title>DIV的同行测试</title>
    </head>

    <body>
    <div>
    <div style='flaot:left; width:330px; height:200px;'>
    <p>我是左边的固定测试文字</p>
    </div>
    <div style='flaot:left; width:330px; height:200px;'>
    <p>我是右边的固定测试文字</p>
    </div>
    </div>
    </body>

    </html>
    第4个回答  推荐于2017-09-07
    <div>
    <div style="float:left">左边的第一个层</div>
    <div style="float:left">并排的层</div>
    </div>

    ===================

    <div>
    <div style="float:left">a</div>
    <div style="float:left">b</div>
    </div>

    笑喷本回答被提问者采纳
    123
    相似回答
    大家正在搜
    相关问题
    HTML中如何让两个div并排显示，举个例子
    html布局，下面怎么使两个div在同一行显示？
    html中怎么将2个div放在同一行
    html布局，下面怎么使两个div在同一行显示？
    怎样让两个div在同一行
    css如何让三个DIV并列在一行中
    css如何让两个div在一行显示