Question

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

CSS和HTML：

＆＃13;

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

＆＃13;

   <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>

＆＃13;

Answer 1

您的代码表现完全正常。您已为 imageContainer 和其他 span 提及inline-block。这意味着如果当前行中有足够的空间 - 内部div imageContainer 和其他 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>

为什么此DIV容器不能始终如一地调整大小？

1 个答案: