Question

我想构建'橡胶'界面，所以我使用宽度为％的div，但是当我尝试用几个div填充100％的宽度时，它们不会在线混合，但在suome中它们有100％。如果使用表然后都很好。以下是示例：

<div style='white-space:nowrap;'>
    <div style='width:50%;border: 1px solid #4e5e6e;display:inline-table;'>A1</div>
    <div style='width:50%;border: 1px solid #a2f2d4;display:inline-table;'>A2</div>
</div>
<div style='white-space:nowrap;'>
    <div style='width:10%;border: 1px solid #4e5e6e;float:left'>A1</div>
    <div style='width:40%;border: 1px solid #a2f2d4;float:left'>A2</div>
    <div style='width:40%;border: 1px solid #4e5e6e;float:left'>A3</div>
    <div style='width:10%;border: 1px solid #a2f2d4;float:left'>A4</div>
</div>
<table style='width:100%'><tr style="width:100%";>
    <td style='width:10%;border: 1px solid #4e5e6e;'>A1</td>
    <td style='width:40%;border: 1px solid #4e5e6e;'>A1</td>
    <td style='width:40%;border: 1px solid #4e5e6e;'>A1</td>
    <td style='width:10%;border: 1px solid #4e5e6e;'>A1</td>
</td></table>

如果你的窗户大小足够，它们都会显示正确，但是如果你把它缩小，有人会跳出它们的线。如果我没有清楚表达，我想在一行中显示div而不依赖于宽度。

Answer 1

1px边框会增加框的宽度。所以你的盒子宽度为50％+ 1px，10％+ 1px等等。

Answer 2

解决方法是从边框中移除像素并将div放在带有边框的％width div内

Answer 3

lucassp说道。

解决方案是为您提供边框的任何内容添加负边距：

<td style='width:10%;border: 1px solid #4e5e6e; margin: -1px;'>A1</td>

div之间的一些空格

3 个答案: