CSS:如何强制显示:表格单元格框具有 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%，这会破坏布局。

如何强制带有 display:table-cell 的框的宽度为 50%，而忽略可能的可用空间？

Answer 1

您所做的是正确的，它们都使用了其父级的 50%，您需要父级占页面的 100%，它们才能占页面的 50%。

编辑:所以我将 width:100% 添加到父级，这样它就会占据整个页面。

请参阅下面的示例。

#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;
}

<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>