并排<div>然后定期<div> </div> </div>

Question

我被HTML和CSS引入了谦卑：

试图模仿以下内容：

这是我的尝试：

<div>
  <div style="width:800px;">
    <div style="float:left;width:25%;background-color:red;">Facility #: COMPANY10</div>
    <div style="float:left;width:50%;background-color:green;text-align:center;">FACILITY_112</div>
    <div style="float:left;width:25%;background-color:blue;text-align:right;">Facility Code: 4071</div>
  </div>
  <div style="width:800px;">
    <div style="float:left;width:25%;background-color:red;">Date: Jul 17, 2014</div>
    <div style="float:left;width:50%;background-color:green;text-align:center;">Custom Assessment (UDA) Report</div>
    <div style="float:left;width:25%;background-color:blue;text-align:right;">User: John Wayne</div>
  </div>
  <div>
    Time: 12:59:11 ET
  </div>
  <div>
    <hr/>
    Assessment Type: 1 - Braden Scale for Predicting Pressure Sore Risk
    <hr/>
  </div>
</div>

这会导致：

我该如何解决这个问题，请帮助。

Answer 1

将最外层<div>的宽度限制为800px。

Answer 2

将width: 800px移至主容器：

<div style="width:800px;">
  <div>
    <div style="float:left;width:25%;background-color:red;">Facility #: COMPANY10</div>
    <div style="float:left;width:50%;background-color:green;text-align:center;">FACILITY_112</div>
    <div style="float:left;width:25%;background-color:blue;text-align:right;">Facility Code: 4071</div>
  </div>
  <div>
    <div style="float:left;width:25%;background-color:red;">Date: Jul 17, 2014</div>
    <div style="float:left;width:50%;background-color:green;text-align:center;">Custom Assessment (UDA) Report</div>
    <div style="float:left;width:25%;background-color:blue;text-align:right;">User: John Wayne</div>
  </div>
  <div>
    Time: 12:59:11 ET
  </div>
  <div>
    <hr/>
    Assessment Type: 1 - Braden Scale for Predicting Pressure Sore Risk
    <hr/>
  </div>
</div>

...并避免使用内联CSS

Answer 3

每当你想强制浮动div到一个新行时，只需使用clear：

<div style="clear:left">

这将忽略当前浮动的任何div，并且任何新的浮动左元素都会将下一行视为其顶部。

Answer 4

在第3 div

中加入此内容

clear:both;

所以它看起来像这样

<div style="clear:both;">
   Time: 12:59:11 ET
</div>

演示： http://jsfiddle.net/EZ7wU/

Answer 5

尝试避免使用内联css并保持更好的html结构。

将第二行中所需的内容添加到单个单独的div：

<div style="clear: both;">
  <time>Time: 12:59:11 ET</time>
  <div>
    <hr/>
    Assessment Type: 1 - Braden Scale for Predicting Pressure Sore Risk
    <hr/>
  </div>
</div>