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

时间:2014-07-17 19:30:40

标签: html css css-float

我被HTML和CSS引入了谦卑:

试图模仿以下内容: enter image description here

这是我的尝试:

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

这会导致: enter image description here

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

5 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

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

答案 2 :(得分:1)

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

<div style="clear:left">

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

答案 3 :(得分:0)

在第3 div

中加入此内容
clear:both;

所以它看起来像这样

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

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

答案 4 :(得分:0)

尝试避免使用内联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>