CSS - 填充(或边距)不调整容器的大小
感谢您花时间阅读此内容。CSS - 填充(或边距)不调整容器的大小
我试图使用CSS,在那里我有一个div容器做一些简单的布局,和两个孩子使用inline-block的设置并排:
<div class="info-window">
<img class="image" src="myURL"/>
<div class=description">some content</div>
</div>
在CSS设置我的容器高度,自动调整图像的高度,使其高度为100%并保持比例,并且我没有为描述指定任何尺寸(我希望它会根据其内容设置)。
.info-window .image {
display: inline-block;
vertical-align: top;
height: 100%;
width: auto;
}
.info-window .description {
display: inline-block;
vertical-align: top;
}
这一切正常,直到我尝试添加这两种元素之间的一些填充或保证金。例如:向描述添加填充 - 左侧,即右侧的项目。请注意,该行为与图像上的填充宽度或边距相同。
.info-window .description {
display: inline-block;
vertical-align: top;
padding-left: 5%;
}
当我这样做时,容器的大小没有正确调整到子级的总宽度。看起来大小是在填充添加之前计算的。
你可以在这里检查这个小提琴:https://jsfiddle.net/tot22292/ 看看文本是如何切割在右边。
我没有搜索一些修正,但框大小:边框;在描述的总大小中包含填充和边框并不能解决问题。
我可能失去了一些东西很容易,但是这是推动我疯了,所以我在这里:)
谢谢!
(决定做成回答这个希望有人能在“为什么”如何填充是由浏览器确定填写。)
我没有任何规范的链接,但这绝对是因为填充是一个百分比值。它也是有意义的。填充或边距的百分比值是相对于父项的宽度的。如果样式表现符合您的预期,则必然会更改父宽度。
基本上,使用您当前的代码,填充影响宽度,宽度影响填充。为了解决这个问题,浏览器的渲染引擎似乎只是使用预填充的宽度来避免无限循环。 “解决方案”将使用静态填充值而不是百分比。
.info-window {
display: inline-block;
white-space: nowrap;
overflow-x: hidden;
}
.info-window .image {
display: inline-block;
vertical-align: top;
height: 100%;
width: auto;
}
.info-window .description {
display: inline-block;
vertical-align: top;
padding-left: 2em;
}
.info-window .title {
font-size: 24px;
font-weight: bold;
color: #000;
white-space: nowrap;
}
<div id="test" style="height:150px;">
<div class="info-window">
<img class="image" src="//placehold.it/312" />
<div class="description">
<span class="title">Some text</span>
<br/> 5
</div>
</div>
</div>
编辑:
好了,所以这里是它在规范邮件寄送。
如果包含块的宽度取决于此元素,则结果布局在CSS 2.1中未定义。
正在值为undefined意味着它是由渲染引擎,所以它听起来像铬至少只是决定故障切换使用预填充的宽度值。
是有道理的,使用%会影响父.. –
该死!我知道我错过了一件容易的事。这显然是发生了什么,感谢约瑟夫! –
@EtienneL不客气。很高兴我能帮上忙。 :) –
您可以将您的width
元素更改为基于百分比而不是auto
,并使用基于像素的填充而不是使用百分比。
.info-window .image {
display: inline-block;
vertical-align: top;
width:50%;
height: auto;
}
.info-window .description {
display: inline-block;
vertical-align: top;
width:50%;
padding-left: 10px;
}
谢谢汤姆。这会影响图像比例。 –
所以改变'高度'为'自动'。更新小提琴。 – Tom
图像'src'不能在你的小提琴上工作 – Tom
好吧,它适用于我,但这是一个与另一个图像src的版本:https://jsfiddle.net/tot22292/3/ –
我没有一个链接到任何规范,但这绝对是因为填充是一个百分比值。它也是有意义的。填充或边距的百分比值是相对于父项的宽度的。如果样式表现符合您的预期,则必然会更改父宽度。这会影响填充。这变得循环。你可以使用非百分比值填充吗? https://jsfiddle.net/wrt9v9xs/ –