Question

我正在制作带有图像的模糊列表，可以在我们网站的任何地方使用。我希望它非常灵活，没有指定的宽度，并且在没有图像和不同尺寸的图像的情况下正常工作。如果块的文本比其图像长，我希望文本不要包裹在图像下面。

我几乎完全按照自己的意愿制作了一个小提琴。 https://jsfiddle.net/4dbgnqha/1/

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

＆＃34;溢出隐藏产生一个对象，以包裹您指定的元素。通过这样做，它能够约束该元素上的可感知可视区域。这将在IE中调用夸克模式，该模式对该页面上的其他元素具有级联效果以及它们将如何被插入＆＃34;

因此，无论我是否同意，我都无法使用它。我也不能使用clearfix黑客，因为他说：

＆＃34; clearfix将:: ::之后的元素转储到DOM中，我们不希望这种事情使布局变得复杂，特别是当我们遍历DOM处理动态添加的元素时潜在的第三方代码＆＃34;

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

这是示例CSS（使用＆＃34; hacks＆＃34;）：

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

Fiddle version

浏览器支持非常普遍 - CANIUSE

清除浮动并防止文本换行而不进行黑客攻击

1 个答案: