Question

我有两个兄弟姐妹都有显示：内联块。为什么我必须将总和降低到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%;
}

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

Answer 2

实现此目的的另一种方法是编写如下的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>

内联块：为什么两个子宽度不等于100％

2 个答案: