清除浮動並防止文本換行而不破解

Question

我正在製作可用於整個站點的任何位置的圖像清單。我希望它非常靈活，沒有指定的寬度，並且可以在沒有圖像和不同尺寸的圖像的情況下正常工作。如果一個塊的文本長於它的圖像，我希望文本不要包裹在圖像下面。

我幾乎完全是我想要它的小提琴。 https://jsfiddle.net/4dbgnqha/1/

現在的問題是，我們的高級開發人員告訴我，我不能使用溢出：隱藏以清除浮動或防止包，因爲：

「溢出隱藏派生的對象環繞元素，通過這樣做，它可以約束在該元素上感知的可視區域，這在IE中調用夸克模式，這對該頁面上的其他元素具有層疊效應，並且它們將如何被插入「

所以我是否同意這一點，我不能使用它。我，因爲他說，也不能使用clearfix黑客：

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

---

Fiddle version

---

瀏覽器支持是相當普遍 - CANIUSE