清除浮动和防止文本换行没有黑客 [英] Clear float and prevent text wrap without hack

问题描述

我制作一个包含图片的图片列表，可以在我们网站的任何地方使用。我想要它真的灵活，没有指定的宽度，并正常工作，没有图像和不同大小的图像。如果块的文本比它的图像长，我想让文本不包裹在图像下。

I am making a list of blurbs with images that can be used anywhere throughout our site. I want it to be really flexible, not have a specified width, and work properly with no image and with different sizes of images. If the text for a block is longer than its image, I want the text not to wrap under the image.

我做了一个小调，几乎完全是我想要的。 https://jsfiddle.net/4dbgnqha/1/

I made a fiddle of pretty much exactly how I want it. https://jsfiddle.net/4dbgnqha/1/

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

Now the problem is, our senior developer told me I can't use overflow:hidden to clear the float or to prevent the wrap because:

溢出隐藏会生成一个对象来包围你指定的元素，通过这样做，它能够约束该元素上可感知的可见区域，这会调用IE中的夸克模式，它具有级联效应

"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，因为他说：

So whether or not I agree with that, I can't use it. I also can't use a clearfix hack because he said:

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

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

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

Now, I tried to find a way to build the layout without these hacks, but I haven't quite been able to get it with the constraints I want (no fixed width on the images, or the container).

以下是示例CSS（带有hacks）：

Here's the sample CSS (with the "hacks"):

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

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

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

推荐答案

使用 display：table-row / table-cell （除非你的开发者也有这个牛肉）...

For this specific example you could use display: table-row / table-cell (unless your dev has a beef with this too)...

.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

Browser support is pretty universal - CANIUSE

这篇关于清除浮动和防止文本换行没有黑客的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！