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/ 看看文本是如何切割在右边。

我没有搜索一些修正，但框大小：边框;在描述的总大小中包含填充和边框并不能解决问题。

我可能失去了一些东西很容易，但是这是推动我疯了，所以我在这里:)

谢谢！

来源

2017-10-20 Etienne L

图像'src'不能在你的小提琴上工作 – Tom

好吧，它适用于我，但这是一个与另一个图像src的版本：https://jsfiddle.net/tot22292/3/ –

我没有一个链接到任何规范，但这绝对是因为填充是一个百分比值。它也是有意义的。填充或边距的百分比值是相对于父项的宽度的。如果样式表现符合您的预期，则必然会更改父宽度。这会影响填充。这变得循环。你可以使用非百分比值填充吗？ https://jsfiddle.net/wrt9v9xs/ –

（决定做成回答这个希望有人能在“为什么”如何填充是由浏览器确定填写。）

我没有任何规范的链接，但这绝对是因为填充是一个百分比值。它也是有意义的。填充或边距的百分比值是相对于父项的宽度的。如果样式表现符合您的预期，则必然会更改父宽度。

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

.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中未定义。

8.4 Padding properties

正在值为undefined意味着它是由渲染引擎，所以它听起来像铬至少只是决定故障切换使用预填充的宽度值。

来源

2017-10-20 13:33:18

是有道理的，使用％会影响父.. –

该死！我知道我错过了一件容易的事。这显然是发生了什么，感谢约瑟夫！ –

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

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

来源

2017-10-20 13:32:35 Tom

谢谢汤姆。这会影响图像比例。 –

所以改变'高度'为'自动'。更新小提琴。 – Tom

CSS - 填充（或边距）不调整容器的大小

回答

相关问题