清除浮动并防止文字自动换行

Question

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

我做了一个 fiddle 几乎完全符合我的要求。 https://jsfiddle.net/4dbgnqha/1/

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

"Overflow hidden spawns an object to wrap around the element you specified that on. By doing so it is able to constrain the perceived viewable area on that element. This invokes quarks mode in IE, which has a cascading effect for other elements on that page and how they will be interprited"

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

"clearfix dumps before:: and after:: elements into the DOM, we don’t want this sort of thing to be complicating layout, especially when we’re traversing through the DOM dealing with dynamically added elements and potential 3rd party code"

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

这是示例 CSS（带有 "hacks"）：

.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

清除浮动并防止文字自动换行

Clear float and prevent text wrap without hack

css

css-float

css-hack