显示:带边框的内联块？

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>

Run Code Online (Sandbox Code Playgroud)

我希望这些块刷新,但目前第二个块被推下..如果我将第二个块的宽度更改为296px然后它的工作原理..

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

Answer 1

thi*_*dot 7

这就是你现在所拥有的,但是尺寸减小了:

我不想使用float:left因为它需要一个带有"clear:both;"的块.

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

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

您需要做的第一件事是删除两者之间的空白divs.

如果要添加a border,可以添加包装元素并将其添加border到该元素.

或者,你可以使用box-sizing: border-box如这里显示.

归档时间：	14 年，11 月前
查看次数：	13046 次
最近记录：	9 年，6 月前