奇怪的 <DIV> 行为

Question

我正在尝试创建一个视图，其中我有一个 div 分为两列，然后一起显示一组 <标签和值 >。在该两列布局下方，应该有一条 dividing 行，然后是一个横跨以上两列宽度并显示一组的列。因此，成品将在上方有两列，然后是 div 行，然后是下方的一列，该列横跨两个顶部列的宽度。

出于某种原因，当我渲染它时，线（我正在用边框底部 CSS 属性渲染）渲染在所有东西的最顶部，而我可以让两列正确显示，单列不会呈现在两列布局下方，而是看起来只是从顶部布局继续流动。所以不是这个：

 label: value              label: value
 label: value              label: value
 label: value              label: value
 label: value              

      -----------------------------
 label: value value value value value value
 label: value value value value value value

我明白了：

      -----------------------------
 label: value              label: value
 label: value              label: value
 label: value              label: value
 label: value              label: value value value value value value
 label: value value value value value value

下面是我的HTML和CSS

HTML

 <div class="two-column-layout">
    <div class="column">
        <div class="field-set">
          <span class="label">From:</span>
              <span class="data">John Smith</span>
        </div>

        <div class="field-set">
          <span class="label">To:</span>
              <span class="data">Jane Smith</span>
        </div>

        <div class="field-set">
          <span class="label">Date Sent:</span>
          <span class="data">01 May 1916</span>
        </div>

        <div class="field-set">
          <span class="label">Sent From:</span>
              <span class="data">Dublin Castle</span>
        </div>

        <div class="field-set">
          <span class="label">Sent To:</span>
            <span class="data">St. Patricks College</span>
        </div>
    </div>

    <div class="column">
        <div class="field-set">
          <span class="label">Author&#39;s Gender:</span>
            <span class="data">Male</span>
        </div>

        <div class="field-set">
          <span class="label">Category:</span>
            <span class="data">Family Life,</span>
            <span class="data">Children,</span>
            <span class="data">Love Letters</span>
        </div>

        <div class="field-set">
          <span class="label">Institution:</span>
          <a class="data" target="_blank" href="http://www.nationalarchives.ie/visit-us/contact-us/">National Archives</a>
        </div>

        <div class="field-set">
          <span class="label">Collection:</span>
          <span class="data">Governor Letters</span>
        </div>
    </div>
</div>

<br/>
<div class="single-column-layout">
  <div class="field-set">
    <span class="label">Subject:</span>
    <span class="data">Lorem ipsum dolor sit amet</span>
  </div>

  <div class="field-set">
    <span class="label">Description:</span>
    <span class="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu aliquet mauris. Cras nec ipsum et nisi iaculis placerat. Morbi massa libero, tempor quis sapien ut, pellentesque laoreet quam. Curabitur euismod mauris nec magna pharetra elementum.</span>
  </div>
</div>

CSS

.two-column-layout {
  max-width: 900px;
  display: block;
  border-bottom: solid 1px;
  margin-bottom: 10px;
}

.column {
    width: 48%;
    margin-left: 5px;
    margin-right: 5px;
    float: left;
  }

.single-column-layout {
  max-width: 900px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  display: block;
}

.field-set {
  font-size: 10pt;
  padding-bottom: 5px;
  display: block;
  width:100%;
}

.fieldset .label {
    font-weight: bold;
  }

.fieldset .data {
}

如有任何帮助，我们将不胜感激

Answer 1

由于您在两列中浮动子项 div 您需要将溢出设置为自动以恢复您寻求的行为，否则父项将崩溃并表现得像没有内容一样：

.two-column-layout {
    max-width: 900px;
    display: block;
    border-bottom: solid 1px;
    margin-bottom: 10px;
    overflow:auto;
}

jsFiddle example

奇怪的 <DIV> 行为

Weird <DIV> Behavior

html

css

css-float