Question

<div class="s-content-style">
   <div class="content">
       <div style="margin-top:5px">11</div>
       <div style="margin-top:5px"></div>
       <div style="margin-top:5px"><b>fff</b></div>
       <div style="margin-top:5px"></div>
       <div style="margin-top:5px"></div>
       <div style="margin-top:5px"></div>
       <div style="margin-top:5px">aaaaaaaaaa</div>
   </div>
</div>

空div相互叠加。如何解决？我需要一个带空格的div。

我试过：

.content{
   overflow: hidden;
}

Answer 1

您可以使用高度不带nbsp;的单格和多格，如下所示：

.content{
   overflow: hidden;
}

<div class="s-content-style">
   <div class="content">
       <div style="margin-top:5px">11</div>
       <div style="margin-top:5px"></div>
       <div style="margin-top:5px"><b>fff</b></div>
       <div style="margin-top:5px;height:5px;"></div>
       <div style="margin-top:5px;height:5px;"></div>
       <div style="margin-top:5px;height:5px;"></div>
       <div style="margin-top:5px">aaaaaaaaaa</div>
   </div>
</div>

Answer 2

You could define a minimum height for the divs inside your container with class .content. If there is content inside the div, the height will increase as needed. If there is no content, the div will still have a minimum height of your defined value. If you set the min-height value to the defined line-height of your content, empty divs will always have the same height as a div with only one line of content.

The advantage of using min-height is, that you don't need to add different css to empty and non-empty divs. You can style them all at once using one definition.

.content div {
  margin-top: 5px;
  min-height: 18px; /* set to min desired height */
}

<div class="s-content-style">
  <div class="content">
    <div>11</div>
    <div></div>
    <div><b>fff</b></div>
    <div></div>
    <div></div>
    <div></div>
    <div>aaaaaaaaaa</div>
  </div>
</div>

Answer 3

@rantihawk早上好，试试这个：

<div class="s-content-style">
<div class="content">
    <div style="margin-top:5px">11</div>
    <div style="margin-top:5px">&nbsp;</div>
    <div style="margin-top:5px"><b>fff</b></div>
    <div style="margin-top:5px">&nbsp;</div>
    <div style="margin-top:5px">&nbsp;</div>
    <div style="margin-top:5px">&nbsp;</div>
    <div style="margin-top:5px">aaaaaaaaaa</div>
</div>

如何使空的div与空间一一对应？

3 个答案: