清除浮动，防止文字缠绕，无需黑客攻击。

Question

我正在制作一个带有图片的简介列表，可以在我们网站的任何地方使用。我希望它能够非常灵活，没有指定的宽度，并且在没有图片和不同大小的图片时都能正常工作。如果一个区块的文字比它的图片长，我希望文字不要包在图片下面。

我做了一个几乎完全按照我想要的方式来摆弄的。https:/jsfiddle.net4dbgnqha1

现在的问题是，我们的高级开发人员告诉我，我不能使用overflow:hidden来清除浮动或防止包裹，因为。

"溢出隐藏会产生一个对象来包围你指定的元素。通过这样做，它能够限制该元素的可视区域。这将在IE中调用夸克模式，这将对页面上的其他元素以及它们如何被插入产生连带效应"

所以不管我是否同意，我都不能用。我也不能使用clearfix hack，因为他说："clearfix会把前::和后::元素转储到DOM中，我们不希望这种东西在布局上变得复杂，特别是当他说:::的时候，我们会把它转储到DOM中。

"clearfix会把之前和之后的元素转储到DOM中，我们不希望这种东西使布局复杂化，尤其是当我们在DOM中遍历动态添加的元素和潜在的第三方代码时"

现在，我试图找到一种方法来构建没有这些黑客的布局，但我还没有完全能够得到我想要的限制（没有固定宽度的图像，或容器）。

下面是CSS示例（有 "黑客"）。

.item {
    overflow: hidden;
    margin-bottom: 20px;
}

.item img {
    float:left;
    margin-right: 10px;
}

.item p {
    margin: 0;
    overflow: hidden;
}

Answer 1

对于这个具体的例子，你可以使用 display: table-row / table-cell 除非你的开发也对这个有意见）......。

.item {
    margin-bottom: 20px;
    display: table;
}

.item img {
    margin-right: 10px;
    display: table-cell;
    vertical-align: top;
}

.item p {
    margin: 0;
    display: table-cell;
    vertical-align: top;
}

<div class="container">
    
    <div class="item">
        <img src="//placehold.it/100x100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
            
    </div>
        
    <div class="item">
        <img src="//placehold.it/150x100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
        
    <div class="item">
        <img src="//placehold.it/100x200">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
    </div>
        
    <div class="item">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
    </div>
        
    <div class="item">
        <img src="//placehold.it/100x100">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
    </div>
    
</div>

---

提琴版

---

浏览器支持是相当普遍的 - CANIUSE