使用 div 并排对齐内容答案

【问题标题】：Aligning content side by side using div使用 div 并排对齐内容
【发布时间】：2017-01-10 03:52:52
【问题描述】：

我有两个div。一个div 代表标题内容，另一个div 代表细节内容。我希望 div 的内容并排对齐。右侧 div 的内容（即详细信息）应始终显示在右侧。如果详细内容不合适，则extra 内容应出现在下一行。像下面这样 File4.pdf 和 File5.pdf 不适合的地方，所以它转到下一行。

我可以使用table 做到这一点，但我想使用div 而不是表格。但是，当内容不适合整个内容时使用div 会移动到下一行。

这里是JSfiddle

【问题讨论】：

你试过 display:flex 还是 inline-block ？

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

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

这里有一些线索：

正如 Gaby aka G. Petrioli 所说，您很可能需要一个包装 div 围绕您的一个或两个 div 来做您想做的事情
如果行的高度是固定的，并且当内容进入新行时滚动条无关紧要，只需使用“溢出：滚动”将两个 div 的高度设置为相同的值。您可以通过专门使用 'overflow-x:scroll' 或 'overflow-y:scroll' 来选择滚动条是水平的还是垂直的
如果您仍然有固定的高度线，但希望不显示不适合的项目，仍然定义尺寸，添加“溢出：隐藏”。这样，所有超出包装 div 的内容都会消失。
当设置了一个维度而不是另一个维度时，例如在 Gaby aka G. Petrioli 示例中，使用 'overflow:hidden' 可以解决这样一个事实，即当浮动内容到达新时，包装 div 没有更新其维度线（激发元素有时会相互重叠）
如果您希望项目被强制为每行特定数量（每个“平铺”的内容被强制调整大小或滚动），您将需要一个布局，其中元素定义为 %.这将更加棘手，需要一个更精确的问题才能完全回答..

【讨论】：

【解决方案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/

【讨论】：