代码之家 › 专栏 › 技术社区 › Solace

为什么width(或max width)属性不适用于我的div?

width css html

Solace · 技术社区 · 9 年前

JSFiddle here.

我想要 240px 为了我的 .left 和 .right div s、我试过了 width 和 max-width ,以及使用 span s而不是 第二部分 s、不起作用。

我很难理解为什么它根本不适用 600px 顺从地应用于 .wrapper 第。

能告诉我为什么会这样吗?我该怎么办?

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;
}

5 回复 | 直到 9 年前

pavel 9 年前

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

如果要设置它们的宽度,请更改 display: inline 他们去 inline-block 或设置 float .

DeDee 9 年前

Inline 元素不使用以下属性 width 或 height 不同于块元素。这就完成了工作,调整利润率,然后根据自己的喜好调整。

display:inline-block;
width:240px;

必须显式设置宽度,否则 block -type元素从父元素继承它。您可以使用 max-width 此外。

Bhojendra Rauniyar 9 年前

这是因为您正在为div使用inline,而inline元素不能具有宽度。

所以,只要设置它们 inline-block;

788498 9 年前

使用 display: block; 和 float: left; (左或右)。

或使用 diplay: inline-block;

bashleigh 9 年前

你需要考虑填充和边距,如果所有内容加起来都超过了容器,这会导致对齐错误。 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。

推荐文章

Joshua Fermin · 内联样式反应元素宽度

6 年前

aaaaa · 减少多重条形图R中的条形宽度

6 年前

user7937949 · 无自动的CSS宽度转换

6 年前

shioko · 为什么x%在Visual Studio中不是属性“width”的有效值?

6 年前

James Pointer · 锚标签未填充高度和宽度

6 年前

Tom O'Sullivan · 如何确定屏幕高度和宽度

6 年前

MrO · 如何使div的宽度与屏幕高度相同?

6 年前

user176105 · 调整大小时保持Jquery给定的宽度

6 年前

Sener · UiCollectionView单元格动态宽度

6 年前

ryanve · text区域最大宽度不受尊重

6 年前