Question

假设我想在屏幕左侧显示div图片，并在另一个div右边显示描述或任何其他文本组。

将两者包装在第三个容器div中有什么好处，而不是仅使用inline-block显示将它们并排放置？

Answer 1

我不知道这会对你有什么帮助，但这是一次尝试.... 对元素的内联块生成内联级块容器。想想标签内的文字。它们都是彼此“内联”的，而标签本身就是一个块级容器。通过了解这种行为，我们可以使用display属性将我们的内容内联到彼此。由于我们所有的元素都保持在正常流程中，因此折叠的父元素没有问题。在我看来，这是一个更清洁的解决方案，仍然可以达到预期的效果。我希望这有帮助！如果不是......我道歉。

Answer 2

我会尝试用一个简单的演示来回答这个问题。使用inline-block的问题在于，inline-block的每个元素都被视为文本字符。这意味着将在元件的侧面和下面提供空间。当您需要设置宽度为的容器元素时，这不起作用。当使用inline-block而不是float或flexbox时，这是水平导航的常见问题。

内联

nav a {
  display: inline-block;
  width: 25%;
  text-align: center;
  background-color: rgba(255, 192, 203, 0.5);
}

<nav>
  <a href="#">Link 1</a> 
  <a href="#">Link 2</a> 
  <a href="#">Link 3</a> 
  <a href="#">Link 4</a> 
</nav>

注意锚元素之间的差距。这是因为他们“内联。”

浮

nav a {
  float: left;
  display: inline-block;
  width: 25%;
  text-align: center;
  background-color: rgba(255, 192, 203, 0.5);
}

<nav>
  <a href="#">Link 1</a> 
  <a href="#">Link 2</a> 
  <a href="#">Link 3</a> 
  <a href="#">Link 4</a> 
</nav>

现在空间消失了，每个元素都是父元素宽度的25％，而元素之间没有额外的空间。

这个演示是另一个常见问题，它与inline元素有关。

.img-border {
  display: inline-block;
  border: 2px solid #333;
}

<span class="img-border">
  <img src="http://placehold.it/100x100">
</span>

注意图片下面的空格？这又是由于元素“内联”并被视为文本字符。这个空间留给了所谓的下降器。像g，j，y这样的小写字母落在文本的基线之下，而做的部分是下降的。

额外的空间不仅成为一个令人头痛的问题，通常更容易控制内容，更不用说相关内容的布局，当它被“封装”在它自己的容器元素中时。

Answer 3

将两者包装在第三个容器div中的好处是什么而不只是使用inline-block显示将它们并排放置？

没有，前者实际上更糟糕，因为它会给你提供比所需更多的标记，并且使响应式布局更加困难。

有很多方法可以做到这一点，每个方法都有其优点和缺点，所以我建议使用最现代的方法flexbox，这将为您提供一种全新的方式，使其具有响应性，完全动态，图像可以有一个尺寸，文本将采用剩余的。

＆＃13;

.parent {
  display: flex
}
.parent div {  
  flex: 1;
  margin-left: 10px;
}

＆＃13;

<div class="parent">

  <img src="http://placehold.it/150" alt="image">

  <div>
    Some text that might or might not match the image. Some text that might or might not match the image. Some text that might or might not match the image. Some text that might or might not match the image. Some text that might or might not match the image. Some text that might or might not match the image. 
  </div>

</div>

＆＃13;

div定位/嵌套div

3 个答案:

内联

浮