将容器包裹在内联 div 周围答案

【问题标题】：Wrap container around inline divs将容器包裹在内联 div 周围
【发布时间】：2016-06-16 15:35:21
【问题描述】：

这是我的问题。我在另一个 div 中有内联块 div。

.timeEvents {
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.timeline {
  border: 1px solid;
}
.events1, .events2 {
  border: 1px solid;
}
.ev1, .ev3 {
  border: 1px solid red;
}
.ev2 {
  margin: 0 auto;
  border: 1px solid red;
  display: inline-block;
}
.mDiv {
  display: inline-block;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid blue;
}

<div class="timeEvents">
  <div class="events1">
    <div class="ev1">Data Field 1</div>
  </div>
  <div class="timeline">
    <div class="ev2">
      <div class="mDiv">5</div>
      <div class="mDiv">10</div>
      <div class="mDiv">15</div>
      <div class="mDiv">20</div>
      <div class="mDiv">25</div>
    </div>
  </div>
  <div class="events2">
    <div class="ev3">Data Field 2</div>
  </div>
</div>

我希望将.ev2 包裹在其内联的子代周围。然后，分别位于上方和下方的.ev1 和.ev3 两个数据字段应与.ev2 具有相同的宽度。这意味着所有带有红色边框的 div（在我的 JSFiddle 中）应该具有相同的宽度（动态的，我不知道），并且宽度不应该是 100%，因为它在 jsFiddle 示例中：https://jsfiddle.net/mzjqw2wx/17/。

编辑 - 我更新了我的小提琴。我不想失去外部 100% 的 div，我想对齐三个红色部分以具有相同的宽度，页面和外部 div 都保持 100%。在包装器上使用 inline-block 的技巧很棒，它可以满足我对中间那个的要求。我想对齐所有红色容器，我用 jQuery 做到了。

【问题讨论】：

标签： css

【解决方案1】：

您还需要为公共包装器设置display: inline-block;（并将text-align: center 提供给其父级）

body { text-align: center; }

.timeEvents {
  display: inline-block;
  margin: 0 auto;
}

JSFiddle

结果：

【讨论】：

这是迄今为止最有用的提示！但是当我进一步澄清问题时，我不想失去设置为 100% 的外部 div。我需要对齐事件 div，可以这么说。
在你的 body 和 .timeEvents 之间添加另一个块包装器（或在 .timeEvents 内作为直接子级）
我是用 jQuery 做的，我不知道这是否是更简单的解决方案。我更新了我的小提琴，你可以看到最终的结果。其他提示也很好，也许我没有清楚地说明我的意思。感谢您的帮助！

【解决方案2】：

使用Flexbox 很容易实现。

只需将display: flex; 分配给.ev2 并将flex-grow: 1; 分配给.myDiv 类。

你可以在下面的代码中看到它：

.timeEvents {
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.timeline {
  border: 1px solid;
}
.events1, .events2 {
  border: 1px solid;
}
.ev1, .ev3 {
  border: 1px solid red;
}
.ev2 {
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
}
.mDiv {
  display: inline-block;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid blue;
  flex-grow: 1;
}

<div class="timeEvents">
  <div class="events1">
    <div class="ev1">Data Field 1</div>
  </div>
  <div class="timeline">
    <div class="ev2">
      <div class="mDiv">5</div>
      <div class="mDiv">10</div>
      <div class="mDiv">15</div>
      <div class="mDiv">20</div>
      <div class="mDiv">25</div>
    </div>
  </div>
  <div class="events2">
    <div class="ev3">Data Field 2</div>
  </div>
</div>

查看CSS-Trick's Complete guide to Flexbox了解更多信息。

【讨论】：

【解决方案3】：

使用display:table 到timeEvents 并删除width:100% 将按照您的预期进行。

.timeEvents {
    display: table;
    overflow: hidden;
  text-align: center;
}

Fiddle

【讨论】：