Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
    <head>
        <style type="text/css">
        body { margin:0;padding:0;}
        </style>
    </head> 
    <body>
    <div>
        <div style="width:1000px;margin:0 auto;">
            <div style="width:700px;display:inline-block;">1</div>
            <div style="width:300px;display:inline-block;">2</div>
        </div>
    </div>
    </body>
    </html>

我希望这些块刷新，但目前第二块被推下.. 如果我将第二个块的宽度更改为296px，那么它可以工作..

我不想使用float:left，因为它需要一个clear:both;块。

Answer 1

This是您目前所拥有的，但缩小了尺寸：

我不想使用float：left因为它还需要一个块 “明确：两者;”。

使用float: left，您可以清除/包含float，而无需添加clear: both元素。您可以通过在父元素上添加overflow: hidden（或clearfix）来完成此操作。

如果你想坚持使用display: inline-block ..

您需要做的第一件事是删除两个divs之间的空格。

如果您想添加border，可以add wrapper elements and add the borders to that。

或者，您可以将box-sizing: border-box用作shown here。

Answer 2

您只能将display：inline-block赋予自然内联的元素（例如span，a）否则，您的元素将无法在旧版浏览器中正确呈现（例如IE7 - ）

Answer 3

在div的宽度中包含边框的宽度。

如果您希望它在屏幕上显示为300px宽，请将其设为298px（左边框为+ 1px，右边框为+ 1px = 300px）。填充也是如此。

阅读w3盒子模型与IE盒子模型。

显示：带边框的内联块？

3 个答案: