CSS - 填充(或边距)不调整容器

时间:2017-10-20 13:16:35

标签: css padding

感谢您花时间阅读本文。

我尝试使用CSS做一些简单的布局,我有一个容器div,两个孩子使用内联块并排设置:

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

这很好用,直到我尝试在两个元素之间添加一些填充或边距。示例:在描述中添加padding-left,即右侧的项目。请注意,行为与图像上的padding-ight或边距相同。

.info-window .description {
  display: inline-block;
  vertical-align: top;
  padding-left: 5%;
}

当我这样做时,容器的大小不适合其子节点的总宽度。看起来在添加填充之前计算大小。

你可以在这里查看这个小提琴:https://jsfiddle.net/tot22292/ 看看右边的文字是如何剪切的。

我确实搜索了一些修复程序,但是框大小调整:border-box;在描述中包含填充和边框的总大小不起作用。

我可能错过了一些简单的事情,但这让我发疯,所以我在这里:)

谢谢!

2 个答案:

答案 0 :(得分:3)

(决定将此作为答案。希望有人可以填写&#34;为什么&#34;浏览器如何确定填充。)

我没有指向任何规范的链接,但这绝对是因为填充是百分比值。这也很有道理。填充或边距的百分比值相对于父级的宽度。如果样式的行为与预期的一致,则必然会更改父宽度。

基本上,使用当前代码,填充会影响宽度,宽度会影响填充。为了解决这个问题,浏览器的渲染引擎似乎只使用预填充宽度来避免无限循环。 &#34;解决方案&#34;将使用静态填充值而不是百分比。

&#13;
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;

修改
好的,这就是它在规范中解决的问题。

  

如果包含块的宽度取决于此元素,则在CSS 2.1中未定义结果布局。

     

8.4 Padding properties

未定义的值意味着它取决于渲染引擎,所以听起来像chrome至少只是决定使用预填充宽度来进行故障转移。

答案 1 :(得分:0)

您可以将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;
}

小提琴:https://jsfiddle.net/wrt9v9xs/2/