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

Question

我想要 .left 和 .right div 的明确宽度 240px。我尝试使用 width 和 max-width，以及使用 spans 而不是 divs，都没有用。

我很不明白为什么它根本不适用，而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

这是因为您正在为 div 使用内联元素，而内联元素不能有宽度。

所以，只需设置它们 inline-block;

Answer 3

与块元素不同，

Inline 元素不使用 width 或 height 等属性。这样就可以了，然后根据自己的喜好调整边距。

display:inline-block;
width:240px;

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

Answer 4

您需要考虑填充和边距，如果所有内容加起来超过容器，就会导致未对齐。 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% = 未对齐。包括 border:1px solid #FF0000; 这使得 2px.

Answer 5

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

或使用diplay: inline-block;

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

Why doesn't the width (or max-width) property apply to my divs?

html

css

width

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

Why doesn't the width (or max-width) property apply to my divs?

html

css

width

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