Question

我有以下代码在屏幕上水平显示5个图像，但由于某种原因，我无法获得Div“在描述之前的块”具有高度，在FireBug中高度为0但是20px边距确实节目。我尝试了很多东西，包括浮动，显示：阻止，位置绝对/相对，并查看以前的问题无济于事。如果我删除仅留下标题的图像，则块显示高度以覆盖标题。

<style type ="text/css">
    .container {
      margin-right: auto;
      margin-left: auto;
      padding-left: 15px;
      padding-right: 15px; }

    .col-md-2 {
        float: left;
        width: 16.66667%;
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        }

    .feat-icons {
      text-align: center;
    }

    .block-before-description {
      margin-bottom: 20px;
      padding: 0px;
    }
</style>

</head>

<body>
<div class="container">
    <div class="block-before-description">
        <div class="col-md-2 feat-icons">
            <img src="icons/30-Days-Support.jpg" width="105" height="105" alt=""/>
            <h4>Support</h4> 
        </div>
        <div class="col-md-2 feat-icons">
            <img src="icons/Design-Icon.jpg" width="105" height="105" alt=""/>
            <h4>Premium Design</h4> 
        </div>
         <div class="col-md-2 feat-icons">
            <img src="icons/Features.jpg" width="105" height="105" alt=""/>
            <h4>Features</h4> 
        </div>    
         <div class="col-md-2 feat-icons">
            <img src="icons/Guide-Icon.jpg" width="105" height="105" alt=""/>
            <h4>Gudie Included</h4> 
        </div>     
         <div class="col-md-2 feat-icons">
            <img src="icons/Mobile-Icon.jpg" width="105" height="105" alt=""/>
            <h4>Mobile Supported</h4> 
        </div>
    </div>

</div>

</body>
</html>

对此问题的任何帮助都表示赞赏。

Answer 1

这是由所有容器浮动引起的经典问题。从子文档的正常流程中删除子项时，不会计算父项的高度。

以下示例未考虑Bootstraps现成的解决方案，因为您在问题中未提及引导程序。

一种选择是简单地将overflow属性应用于父级：

Example with overflow and floats.

.block-before-description {
  margin-bottom: 20px;
  padding: 0px;
  background: #F00;
  overflow: hidden;
}

另一种选择是根本不使用浮动，并使用display: inline-block在一条水平线上显示图像。

Example with inline-block

 .col-md-2 {
    display: inline-block;
    vertical-align: top; /* use middle, top or bottom to keep an even alignment */
    width: 16.66667%;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
 }

包含图像时，Div高度保持为零

1 个答案: