我有两个兄弟姐妹都有显示:内联块。为什么我必须将总和降低到97%以使它们彼此相邻?例如:https://jsfiddle.net/kcscq271/1/
<div class="container">
<img src="./test.jpg">
<div class="child1">
Test Stuff
</div>
</div>
.container {
border: 1px solid red;
width: 300px;
}
.child1 {
display: inline-block;
width: 80%
}
img {
display: inline-block;
width: 20%;
}
答案 0 :(得分:1)
内联块渲染html空格。将div放在图像旁边而不是下面。
<div class="container">
<img src="./test.jpg"><div class="child1">
Test Stuff
</div>
</div>
或尝试浮动
img {
float: left;
display: inline-block;
width: 20%;
}
答案 1 :(得分:0)
实现此目的的另一种方法是编写如下的html:
<div class="container">
<img src="./test.jpg"><div class="child1">Test Stuff</div>
</div>
或
<div class="container">
<img src="./test.jpg"><!--
--><div class="child1">Test Stuff</div>
</div>