0

我有一堆元素彼此相邻浮动，它们不在单独的行中，因此在必要时它们会下降到下一行，因此如果其中一个元素比另一个元素短于它下面的元素应该更高比它的兄弟姐妹，但情况似乎并非如此，所有元素的行为就好像它们在包装行中并且都具有相同的高度。

CodePen：http ://codepen.io/anon/pen/oXLQWg

您可以看到顶部中间元素的高度较小，但它下方的元素不会靠近它，而是与其他元素一起定位。

示例代码：

HTML：

<div class="container">
<div class="list row">
    <div class="holder col-xs-12 col-md-4">
        <div class="review">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan et sem ut pretium. Sed nisl mauris, scelerisque eget nulla in,
                varius semper risus. Cras mollis lacus lacus, ut iaculis leo dictum sed. Quisque porttitor metus et faucibus mollis. Etiam eget velit
                aliquam nisl mattis gravida vitae ac purus. Suspendisse vel magna et leo rutrum varius ut sit amet metus. Vestibulum ante ipsum primis
                in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse odio nisi, convallis nec lacinia condimentum, rhoncus nec mi. 
            </p>
        </div>
    </div>
    <!-- Holder Ends -->
    <div class="holder col-xs-12 col-md-4">
        <div class="review">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan et sem ut pretium. Sed nisl mauris, scelerisque eget nulla in,
                varius semper risus. Cras mollis lacus lacus, ut iaculis leo dictum sed.
            </p>
        </div>
    </div>
    <!-- Holder Ends -->
    <div class="holder col-xs-12 col-md-4">
        <div class="review">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan et sem ut pretium. Sed nisl mauris, scelerisque eget nulla in,
                varius semper risus. Cras mollis lacus lacus, ut iaculis leo dictum sed. Quisque porttitor metus et faucibus mollis. Etiam eget velit
                aliquam nisl mattis gravida vitae ac purus. Suspendisse vel magna et leo rutrum varius ut sit amet metus. Vestibulum ante ipsum primis
                in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse odio nisi, convallis nec lacinia condimentum, rhoncus nec mi. 
            </p>
        </div>
    </div>
    <!-- Holder Ends -->                
    <div class="holder col-xs-12 col-md-4">
        <div class="review">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan et sem ut pretium. Sed nisl mauris, scelerisque eget nulla in,
                varius semper risus. Cras mollis lacus lacus, ut iaculis leo dictum sed. Quisque porttitor metus et faucibus mollis. Etiam eget velit
                aliquam nisl mattis gravida vitae ac purus. Suspendisse vel magna et leo rutrum varius ut sit amet metus. Vestibulum ante ipsum primis
                in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse odio nisi, convallis nec lacinia condimentum, rhoncus nec mi. 
            </p>
        </div>
    </div>
    <!-- Holder Ends -->            
    <div class="holder col-xs-12 col-md-4">
        <div class="review">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan et sem ut pretium. Sed nisl mauris, scelerisque eget nulla in,
                varius semper risus. Cras mollis lacus lacus, ut iaculis leo dictum sed. Quisque porttitor metus et faucibus mollis. Etiam eget velit
                aliquam nisl mattis gravida vitae ac purus. Suspendisse vel magna et leo rutrum varius ut sit amet metus. Vestibulum ante ipsum primis
                in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse odio nisi, convallis nec lacinia condimentum, rhoncus nec mi. 
            </p>
        </div>
    </div>
    <!-- Holder Ends -->            
    <div class="holder col-xs-12 col-md-4">
        <div class="review">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan et sem ut pretium. Sed nisl mauris, scelerisque eget nulla in,
                varius semper risus. Cras mollis lacus lacus, ut iaculis leo dictum sed. Quisque porttitor metus et faucibus mollis. Etiam eget velit
                aliquam nisl mattis gravida vitae ac purus. Suspendisse vel magna et leo rutrum varius ut sit amet metus. Vestibulum ante ipsum primis
                in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse odio nisi, convallis nec lacinia condimentum, rhoncus nec mi. 
            </p>
        </div>
    </div>
    <!-- Holder Ends -->            
</div>
<!-- List Ends -->
</div>
<!-- Container Ends -->

CSS：

.list {
    margin-top: 43px;
}

.list .holder {
    margin-bottom: 15px;
}

.list .review {
    position: relative;
    padding: 14px 20px 20px 20px;
    color: #fff;
    background-color: #e67e22;
}

.list .review p {
    margin: 0;
}

从我的测试来看，它似乎与设置有关box-sizing: border-box;。

无论如何要解决这个问题，以便较小的元素在它能够或我必须设置为时直接在其上方的元素下方box-sizing对齐content-box？

4

0 回答 0