0

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

我几乎完全按照我想要的方式做了一个小提琴。https://jsfiddle.net/4dbgnqha/1/

现在的问题是，我们的高级开发人员告诉我我不能使用溢出：隐藏来清除浮动或防止换行，因为：

“溢出隐藏会生成一个对象以环绕您指定的元素。通过这样做，它能够限制该元素上的可感知可视区域。这会在 IE 中调用夸克模式，该模式对该页面上的其他元素具有级联效果以及它们将如何被解释”

所以无论我是否同意，我都不能使用它。我也不能使用 clearfix hack，因为他说：

“clearfix 将之前:: 和之后:: 元素转储到 DOM 中，我们不希望这种事情使布局复杂化，尤其是当我们遍历 DOM 处理动态添加的元素和潜在的第 3 方代码时”

现在，我试图找到一种在没有这些技巧的情况下构建布局的方法，但我还没有完全能够在我想要的约束下获得它（图像或容器上没有固定宽度）。

这是示例 CSS（带有“hacks”）：

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

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

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

1 回答 1

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

于 2015-04-07T20:46:29.500 回答