Question

我有两个div。一个div表示标题内容，另一个div表示详细信息内容。我希望div的内容并排排列。右侧div（即细节）的内容应始终显示在右侧。如果详细内容不合适，则extra内容应显示在下一行中。类似下面的文件，其中File4.pdf和File5.pdf不适合所以它转到下一行。

我能够使用table执行此操作，但我想使用div而不是表格。但是，如果内容不适合使用div，则整个内容会移至下一行。

这是JSfiddle

Answer 1

您需要一个右侧元素的容器，具有以下样式

float:left;
width:calc(100% - 222px); /*the -222px is the width of the left element + the padding + the margin*/
overflow:hidden;

完整更新的示例（来自提供的jsfiddle ）

dl {
  margin-bottom: 30px;
}
dl dt {
  float: left;
  font-weight: bold;
  margin-right: 2px;
  width: 200px;
}
dl dd {
  margin: 2px 0;
}
.details-container {
  float: left;
  width: calc(100% - 222px);
  overflow: hidden;
}

<div style="float:left;padding-right:20px;">
  <dl>
    <dt>Name:</dt>
    <dd>Foo Bar</dd>
    <dt>Date:</dt>
    <dd>01/04/2017</dd>
  </dl>
</div>
<div class="details-container">
  <div style="float:left">
    <dl>
      <dt>File Name:</dt>
      <dd>File1.pdf</dd>
      <dt>Page Count</dt>
      <dd>10</dd>
    </dl>
  </div>
  <div style="float:left">
    <dl>
      <dt>File Name:</dt>
      <dd>File2.pdf</dd>
      <dt>Page Count</dt>
      <dd>10</dd>
    </dl>
  </div>
  <div style="float:left">
    <dl>
      <dt>File Name:</dt>
      <dd>File3.pdf</dd>
      <dt>Page Count</dt>
      <dd>10</dd>
    </dl>
  </div>
  <div style="float:left">
    <dl>
      <dt>File Name:</dt>
      <dd>File4.pdf</dd>
      <dt>Page Count</dt>
      <dd>10</dd>
    </dl>
  </div>
</div>

Answer 2

您应该更准确地了解您想要的内容，因为有很多不同的方法可以实现这一点，具体取决于您是否有“详细信息”每行的固定数量的元素，如果您希望它具有响应性，或者是固定大小元素中的其他东西的一部分？如果div中的任何列表变得太大，您是否希望显示滚动？

以下是一些线索：

如Gaby又名G. Petrioli所说，你很可能需要一个或两个div之间的包装div来做你想做的事。
如果一行的高度是固定的，当内容到达一个新行时你不重要滚动条，只需将两个div的高度设置为相同的值，使用'overflow：scroll'。您可以选择使用'overflow-x：scroll'或'overflow-y：scroll'
如果你仍然有固定的高度线，但想要不显示不适合的项目，仍然定义尺寸，添加'overflow：hidden'。这样，包装div之外的所有内容都将消失。
当设置尺寸而不是另一个尺寸时，例如在Gaby又名G. Petrioli示例中，使用'overflow：hidden'可以解决当浮动内容变为新的时包装div没有更新其尺寸的事实线（引起元素有时相互重叠）
如果您希望每行强制项目一定数量（每个“tile”的内容被强制调整大小或滚动），您将需要一个包含在％中定义的元素的布局。这将更加棘手，需要一个更精确的问题才能完全回答..

Answer 3

FlexBox ??

<div class="container">
<div class="left">
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value asd asd as das d</div>
  </div>
</div>
<div class="right">
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value asd asd as</div>
  </div>
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value adasd</div>
  </div>
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value</div>
  </div>
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value</div>
  </div>
  <div class="item">
    <div class="title">Title</div>
    <div class="value">Value</div>
  </div>
</div>
</div>

.container {
   display: flex;
 }

 .item {
   padding-bottom: 30px;
 }

  .container .left {
    display: flex;
    align-items: center;
    padding-right: 50px;
  }
    .container .right {
      display: flex;
      width: 70%;
      flex-wrap: wrap;
    }

    .container .right .item {
      width: 30%;
    }

工作示例{{3}}

使用div并排对齐内容

3 个答案: