html - 为什么这个 DIV 容器的大小调整不一致？

Question

因为这个fiddle shows ，我有一个外部 DIV，左侧有一个内部 DIV 和两个内部 SPANS。我希望两个 SPANS 位于 DIV 旁边，但如果我用 BR 将它们分开，则外部 DIV 只会根据第一个 SPAN 的宽度调整大小。如果第二个 SPAN 比第一个窄，则它位于正确的位置。如果它比第一个宽，它就会低于内部 DIV。

CSS 和 HTML:

  #wrapper {
        border: 2px solid blue;
        display: inline-block;
    }
    
    #imageContainer {
        border: 1px solid red;
        background-color: yellow;
        display: inline-block;
        height: 60px;
        width: 60px;  
    }
    
    .slab {
        display: inline-block;
    }

   <div id="wrapper">
        <div id="imageContainer">
            Image
        </div>
        <span id="line1" class="slab">Sample Text</span>
        <br>
        <span id="line2" class="slab">Sample Text 2</span>
    </div>

  

Answer 1

您的代码的行为完全符合预期。您已经为 imageContainer 和其他 span 提到了 inline-block。这意味着如果当前行内有足够的空间 - 内部 div imageContainer 和其他 span 将尝试适应，如果空间不足 - span 将落到下一行最后一个跨度，然后是第一个跨度。

推荐的方法是按照以下方式正确构建代码:

<div class="outer">
    <div class="img"> <!-- you can use inline-block or float (must have width)  -->
      Put image here
    </div>
    <div class="content"> <!-- you can use inline-block or float (must have width)  -->
         Put your spans here.
    </div>
</div>