Question

我正在尝试创建一个视图，其中我将一个div分成两列，然后显示一组＆lt;标签和价值＆gt;一起。在这两个列布局下面，应该有一个分界线，然后是一个跨越上面两列宽度的单个列，并显示一组＆lt;标签和价值＆gt;。因此，成品将在上方有两列，然后是一条分界线，然后是下面的一列，横跨两个顶柱的宽度。

出于某种原因，当我渲染它时，该线（我使用border-bottom 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中，你需要将溢出设置为auto来恢复你寻找的行为，否则父母会崩溃并表现得没有内容：

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

<强> jsFiddle example

奇怪的<div>行为</div>

1 个答案: