css - 将容器包裹在内联 div 周围

Question

这是我的问题。我在另一个 div 中有内联 block 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/ .

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

Answer 1

您还需要为通用包装器设置 display: inline-block;(并将 text-align: center 给它的父级)

body { text-align: center; }

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

JSFiddle

---

结果: