logo标签列表

使用边框的inline-block显示方式？

htmlcss
5

<!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;属性的块。
将clearfix类添加到包装div中：https://css-tricks.com/snippets/css/clear-fix/ - circusdei
4个回答
8

这是您现在拥有的，但尺寸缩小了：

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

使用float: left，您可以在不添加具有clear: both的元素的情况下清除/包含float。 您可以通过在父元素上添加overflow: hidden（或clearfix）来实现此目的。

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

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

如果要添加border，您可以添加包装元素并将border添加到其中。

或者，您可以在此处使用box-sizing: border-box，如所示。

2
如果您想在一行中使用两个元素（总共1000像素，其中300+700像素）- 只需为容器设置font-size:0。在这种情况下，这非常合乎逻辑，现在您可以使用inline-blocks的所有好处，例如align:justify！
1

你只能将display:inline-block应用于自然呈现为行内元素的元素（例如span，a） 否则，在旧版浏览器（例如IE7-）中，您的元素将无法正确呈现

0

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

如果您想让它在屏幕上显示为300像素宽，请将其设置为298像素（+1像素为左边框，+1像素为右边框= 300像素）。这对于填充也是如此。

阅读w3盒模型与IE盒模型的比较。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接