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

Question

我有以下 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 使用整个可用宽度也很重要。

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>