怪异的<DIV>行为

Question

我正在尝试创建一个视图，其中将一个div拆分为两个列，然后在其中显示一组< label和value >。在这两列布局下，应该有一条分界线，然后是一列，它跨越上述两列的宽度，并显示一组< label和value >。所以成品上有两列，然后是一条分界线，然后是下面的一列，它跨越两列的宽度。

由于某种原因，当我呈现这一行时(我用边框底部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

 <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中浮动子列，所以需要将溢出设置为auto以恢复所寻求的行为，否则父程序将崩溃，并表现为没有内容：

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

jsFiddle实例