Question

我正在尝试用css显示行中的div

这是我的html

<body>
  <div id="main">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
  </div>
   <div id="main_new">
    <div id="div1_new">div1_new</div>
    <div id="div2_new">div2_new</div>
  </div>
</body>

这是我的CSS

#div1{
  border: solid 1px #000000;
  background-color: #0066CC;
  float: left;
}
#div2{
  border: solid 1px #000000;
  background-color: #66CC00;
  float: right;
}

JSfiddle

这里我只设置了第一行div sub div div in one line
但我想设置另外两个与此相同的div div1_new位于div1的下方 div2_new位于div2下方

感谢。

Answer 1

试试这个小提琴 http://jsfiddle.net/J7mJX/47/ 您需要应用clearfix

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Answer 2

你的html的CSS：

#div1, #div1_new {
  border: solid 1px #000000;
  background-color: #0066CC;
  float: left;
}

#div2, #div2_new {
  border: solid 1px #000000;
  background-color: #66CC00;
  float: right;
}

#main, #main_new {
  overflow:hidden;
}

Answer 3

这就是你想要的吗？ http://jsfiddle.net/ugktn/

<body>
  <div id="left-col">
    <div>div1</div>
    <div>div1_new</div>
  </div>
  <div id="right-col">
    <div>div2</div>
    <div>div2_new</div>
  </div>

   <div id="main_new">
    middle text   
   </div>
</body>

的CSS：

body{
  margin: 0;
}
#left-col{
  border: solid 1px #000000;
  background-color: #0066CC;
  float: left;
}
#right-col{
  border: solid 1px #000000;
  background-color: #66CC00;
  float: right;
}

Answer 4

为所有div指定所需的宽度。在所有

中包含此内容

宽度：100像素;
浮动：左;

Answer 5

尝试使用更少的div :-)

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Bla! </title>
        <style type='text/css'>
            div {width:50%; float:left}
            div.divRed { background-color:red; }
            div.divGreen { background-color:Green; }
        </style>
    </head>
    <body >
        <div class='divRed'> div1 </div>
        <div class='divGreen'> div2 </div>
        <div class='divGreen'> div1 new </div>
        <div class='divRed'> div2 new </div>
    </body>
</html>

Answer 6

在第一个容器结束之前添加<div style="clear:both;"></div>

Answer 7

<强> DEMO

#main {
    width:50%;
    float:left;
}
#main_new {
    width:50%;
    float:right;
}
#div1{
  border: solid 1px #000000;
  background-color: #0066CC;
}
#div2{
  border: solid 1px #000000;
  background-color: #66CC00;
}
#div1_new{
  border: solid 1px #000000;
  background-color: red;
}
#div2_new{
  border: solid 1px #000000;
  background-color: yellow;
}

Answer 8

如果您不想更改实际代码并使用css计算，请在css中执行此操作：

body{
  margin: 0;
}
#main{
  border: solid 1px #000000;
  background-color: #0066CC;
  float: left;
}
#main_new{
  border: solid 1px #000000;
  background-color: #66CC00;
  float: right;
}

http://jsfiddle.net/J7mJX/51/

或者如果你想要它们并排添加一个宽度到身体：

body{
  margin: 0;
  width: 113px;
}
#main{
  border: solid 1px #000000;
  background-color: #0066CC;
  float: left;
}
#main_new{
  border: solid 1px #000000;
  background-color: #66CC00;
  float: right;
}

http://jsfiddle.net/J7mJX/52/

Answer 9

HTML：

<div id="main-div">
<div style="float:left">div1</div>
<div style="float:right">div2</div>
<div style="clear:both"></div>
</div>

<div id="main-div1">
<div style="float:left">div3</div>
<div style="float:right">div4</div>
<div style="clear:both"></div>
</div>

的CSS：

#main-div,.main-div1{
  width:90px;
}

Answer 10

我认为这就是你想要的。

将id名称更改为类。我还放了一个br标签来分隔div！

<body>
  <div id="main">
    <div class="divs1">div1</div>
    <div class="divs1">div2</div>
  </div>
    <br/>
   <div id="main_new">
    <div class="divs2">div1_new</div>
    <div class="divs2">div2_new</div>
  </div>
</body>

（display:inline-block;是您可能遗漏的代码）这是经过调整的Css：

.divs1{
  border: solid 1px #000000;
  background-color: #0066CC;
    width:70px;
    display:inline-block;
}
.divs2{
  border: solid 1px #000000;
  background-color: #66CC00;
  width:70px;
    display:inline-block;
}

这是一个帮助的小提琴链接：

http://jsfiddle.net/Anicefry/t3Lmw/

一行中有两个div，下一行有两个div

10 个答案: