在内联div周围包裹容器

Question

这是我的问题。我在另一个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％。在包装器上使用内联块的技巧很棒，它用中间的做了我想要的。我想对齐所有红色容器，我用jQuery做了。

Answer 1

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

body { text-align: center; }

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

JSFiddle

结果：

Answer 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了解详情。

Answer 3

将display:table用于timeEvents，然后移除width:100%将根据您的预期进行制作。

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

<强> Fiddle