0

我有一个简单的页面，它应该呈现一个宽度为 1220 像素的外部容器，其中包含两个内部部分，一个是 770 像素宽，一个是 330 像素宽。它们都有 20px 的边距，而 770px 的左右边距设置为 20px。

这使得

  • 20+20+770+20+20+20+330+20 = 1220
  • 或 ... 边距 + 填充 + 部分 + 填充 + 边距 + 边距 + 部分 + 边距

使用浮动时，我可以将外部宽度设置为 1220 像素，将内部宽度设置为 770 和 330，使用边距和填充来填充其余部分。这呈现正确，但我不想要花车！

<div style="width: 1220px; background-color:#ffe4c4;">
    <section style="width: 770px; float: left; padding: 0 20px; margin: 20px; background-color: #ccc;">
        <!-- content goes here -->
        @RenderBody()
    </section>

    <section style="width: 330px; float: left; margin: 20px; background-color: #d8bfd8; padding: 0">
            <img src="/media/1155/menu_fake.jpg" width="330" />
    </section>
</div>

使用 inline-block 时，我必须删除一些像素（确切地说是 4px）以使元素彼此相邻显示。

<div style="width: 1220px; background-color:#ffe4c4;">
    <section style="width: 766px; vertical-align:top; padding: 0 20px; margin: 20px; background-color: #ccc;">
        <!-- content goes here -->
        @RenderBody()
    </section>

    <section style="width: 330px; display: inline-block; vertical-align:top; margin: 20px; background-color: #d8bfd8; padding: 0">
            <img src="/media/1155/menu_fake.jpg" width="330" />
    </section>
</div>

任何建议表示赞赏，谢谢！

4

1 回答 1

5

inline-block元素还呈现源中元素之间的空白。要消除它们，您需要删除代码中的空格。

更多细节在这里

于 2013-05-03T09:54:39.880 回答