水平格式化DIV

Question

我在格式化DIV时遇到了一些麻烦。如果这个问题有点傻，那我就不是一个网络人了。

目前在我的网页上我有一个里面有3个div的表格。一个div位于顶部，另外两个并排：

但是如果底部两个div都设置为容器宽度的50％，则它们将垂直堆叠。如果设定为50％和49％，他们将保持同步，但存在巨大的差距：

以下是HTML的简化版本，其中包含样式。

<form id="Form1" style="width:100%">
    <div id="Div1">
        <table id="Table1" cellspacing="1" cellpadding="1" width="100%">
            Table Stuff
        </table>
    </div>
    <div id="Div2" BorderWidth="1" Style="display: inline-block;
    width: 49%; float: left;">
        <table id="Table2" cellspacing="1" cellpadding="1" width="100%">
            Table Stuff
        </table>
    </div>
    <div id="Div3" BorderWidth="1" Style="display: inline-block;
    width: 50%; float: Right;">
        <table id="Table3" cellspacing="1" cellpadding="1" width="100%">
            Table Stuff
        </table>
    </div>
</form>

感谢您的帮助。

Answer 1

我会使用flexbox。

将表格用于表格数据，而不是布局。

您需要考虑边框添加到元素宽度的宽度。最简单的解决方法是将box-sizing: border-box;应用于这些元素。这将告诉浏览器在计算宽度时包含边框。

即。如果你告诉一个元素的宽度和高度为200px并给它一个5px的边框，没有 box-sizing: border-box;你的元素的宽度和高度将是210px（5px + 200px + 5px） 。 使用 box-sizing: border-box;边框包含在宽度中，因此宽度和高度保持为200px，边框位于其中，从而减少了内容的可用空间。

div {
  min-height: 100px;
}

form {
  display: flex;
  flex-wrap: wrap;
}

div {
  box-sizing: border-box;
}

div:nth-child( 1 ) {
  width: 100%;
  border: 1px solid red;
}

div:nth-child( 2 ) {
  width: 50%;
  border: 1px solid green;
}

div:nth-child( 3 ) {
  width: 50%;
  border: 1px solid yellow;
}

<form>
  <div></div>
  <div></div>
  <div></div>
</form>

Answer 2

那是因为边框宽度。如果你放50％+ 50％+边界超过100％。我现在不记得但是存在一个css属性或者类似的东西允许将边框包含在宽度的％中。这将解决您的问题。