Question

我有以下HTML代码，在页面上显示一些DIV元素。

＆＃13;

<div style="float: left; width:182px; height:200px; border-style: solid; border-width:1px">Left Column</div>
<div style="margin-left: 200px; border-style:solid; border-width:1px">

  <div style="float: left; border-style: solid;border-width:1px;">Div1</div>
  <div style="float: left; border-style: solid;border-width:1px;">Div2</div>
  <div style="clear:left; border-style: solid;border-width:1px;">Div3</div>
  <div style="float: left; border-style: solid;border-width:1px;">Div4</div>
</div>

＆＃13;

我希望Div3显示在Div1和Div2的正下方，但是显示左列结束的地方，所以div1 / div2和div3之间有一个很大的空间。

如何让div3显示在div1 / div2下面？ div3使用整个可用宽度也很重要。

Answer 1

使用这可能有助于你

<div style="float: left; width:182px; height:200px; border-style: solid; border-width:1px">Left Column</div>
<div style="margin-left: 200px; border-style:solid; border-width:1px">

  <div style="float: left; border-style: solid;border-width:1px;">Div1</div>
  <div style="border-style: solid;border-width:1px;">Div2</div>
  <div style="border-style: solid;border-width:1px; display:block;">Div3</div>
  <div style="border-style: solid;border-width:1px; display:block">Div4</div>
</div>

Answer 2

div{
border: 1px solid #000;
box-sizing: border-box;
}
.sidebar{
float: left;
width:27%;
height: 200px;
}
.content{
float: left;
width: 70%;
margin-left: 3%;
}
.content:after{
content: '';
clear: both;
display: block;
}

<div class="sidebar">Left Column</div>
<div class="content">

  <div style="float: left; ">Div1</div>
  <div style="float: left;">Div2</div>
  <div style="clear:left;">Div3</div>
  <div style="float: left;">Div4</div>
</div>

https://jsfiddle.net/3sfa0jc1/

Answer 3

你需要小心浮动，浮动元素，而不是设计布局。我建议通过显示浮动更改。否则，我用浮动解决你的问题。

您可以查看它正在运行：http://jsfiddle.net/h5o50n41/

代码：

<div style="float: left; width:182px; height:200px; border-style: solid; border-width:1px"> Left Column </div>   
<div style="float:left;margin-left: 200px; border-style:solid; border-width:1px"> 

   <div style="float: left; border-style: solid;border-width:1px;"> Div1 </div>
   <div style="float: left; border-style: solid;border-width:1px;"> Div2 </div>
   <div style="clear:left;float:left; width:100%; border-style: solid;border-width:1px;"> Div3 </div>  
   <div style="float: left; border-style: solid;border-width:1px;"> Div4 </div> 
</div>

使用float和margin-left创建html布局的问题

3 个答案: