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

【问题标题】：Problems creating html layout using float and margin-left使用 float 和 margin-left 创建 html 布局的问题
【发布时间】：2015-08-19 11:43:03
【问题描述】：

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

<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>

我希望 Div3 显示在 Div1 和 Div2 的正下方，但它显示在左列结束的位置，因此 div1/div2 和 div3 之间有很大的空间。

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：