使用div并排对齐内容

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 aka G. Petrioli所说的那样，您很可能需要在一个或两个div周围使用包装div来做您想要的事情
• 如果一行的高度是固定的，并且当内容移到新行时滚动条也没有关系，只需使用“ overflow：scroll”将两个div的高度设置为相同的值即可。 您可以通过专门使用'overflow-x：scroll'或'overflow-y：scroll'选择滚动条是水平的还是垂直的
• 如果您仍然有固定的高度线，但不希望显示不适合的项目，则仍然定义尺寸，并添加“ overflow：hidden”。 这样，包装div之外的所有内容都将消失。
• 当设置了一个尺寸而不是一个尺寸时，例如在Gaby aka G. Petrioli示例中，使用“ overflow：hidden”可以解决以下事实：当浮动内容移至新行时，包装div的尺寸没有更新（引起元素有时彼此重叠）
• 如果您希望每行将项目强制为一定数量（每个“平铺”的内容被强制调整大小或滚动），则需要使用以％定义的元素的布局。 这将更加棘手，并且需要更精确的问题才能完全回答。

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%;
    }

工作示例https://jsfiddle.net/494wrsyo/2/