Question

我希望240px和.left .right的显式宽度为div。我尝试使用width和max-width，以及使用span而不是div，这样做无效。

我无法理解为什么它根本不适用，而600px的固定宽度乖乖地适用于.wrapper div。

我可以被告知为什么会这样，我该怎么办？

HTML：

<div class="wrapper">
    <div class="left">
        UGH
    </div>
    <div class="right">
        AGH
    </div>
</div>

CSS：

.wrapper{
    width:600px;
    background-color:red;
    padding: 0 50px 0 50px;
}
.left{
    display:inline;
    background-color:pink;
    max-width:240px;
    margin-right:10px;
}
.right{
    display:inline;
    background-color:grey;
    max-width:240px;
    margin-left:10px;
}

Answer 1

它们是内联的，宽度与内容相同。

如果您想要设置宽度，请将display: inline更改为inline-block或设置float。

Answer 2

与块元素不同，

Inline元素不使用width或height等属性。这样就完成了工作，然后根据你的喜好调整边距。

display:inline-block;
width:240px;

必须显式设置宽度，否则block - 类型元素将从父元素继承它。您可以另外使用max-width。

Answer 3

这是因为你使用内联的div和内联元素不能有宽度。

所以，只需设置inline-block;

即可

Answer 4

使用display: block;和float: left;（左或右）。

或使用diplay: inline-block;

Answer 5

您需要考虑填充和边距，如果所有内容都超过容器，则会导致错误对齐。 inline和inline-block可以处理元素，但最终它们不适用于所有浏览器。我发现最好使用书中最古老的方法！ float。

.wrapper{
    width:600px;
    background:#FF0000;
    padding:0 50px;
}
.left,.right{
    width:240px;
    margin:0 5px;
    float:left;
}
.clear{
    clear:both;//when using float we need to clear the floating space. Or something? 
}

因此，在所有浮动元素之后，添加以下元素：

<div class='clear'></div>

确保你没有超出你的100％。 600 = 100％。超过100％=错位。包括生成2px的border:1px solid #FF0000;。

为什么宽度（或最大宽度）属性不适用于我的div？

5 个答案: