CSS：如何强制显示：table-cell box的固定宽度为50％？

Question

HTML：

<div id="frontpage_boxes">
    <div id="frontpage_boxes_inner">
        <div id="fp_box1" class="fp_box">...</div>
        <div id="fp_box2" class="fp_box">...</div>
        <div class="clear"></div>
    </div>
</div>

CSS：

#frontpage_boxes {
    margin-bottom:60px;
    margin-top:1vw;
    display:table;
    table-layout:fixed;
}

#frontpage_boxes_inner {
    display:table-row;
}

.fp_box {
    display:table-cell;
    width:50%;
    box-sizing:border-box;
    text-align:center;
    overflow:hidden;
}

问题是我需要显示表格单元格，以使框具有相同的高度。它们也应该具有相同的宽度。只要有很多空间，一切都很好。但是，如果空间变小，第一个盒子的长度会超过50％，这会打破布局。

如何强制显示一个框：table-cell宽度为50％，忽略可能的可用空间？

Answer 1

您所做的是正确的，他们都使用了父母的50％，您需要父母100％的页面，他们都是50％的页面。< / p>

修改 所以我将宽度：100％添加到父级，因此占用了整个页面。

见下面的例子。

＆＃13;

＆＃13;

#frontpage_boxes {
  margin-bottom: 60px;
  margin-top: 1vw;
  display: table;
  table-layout: fixed;
  width: 100%;
}

#frontpage_boxes_inner {
  display: table-row;
}

.fp_box {
  display: table-cell;
  width: 50%;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}

＆＃13;

<div id="frontpage_boxes">
  <div id="frontpage_boxes_inner">
    <div id="fp_box1" class="fp_box">...</div>
    <div id="fp_box2" class="fp_box">...</div>
    <div class="clear"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;