CSS圖像和文字

Question

我有這樣的情況，我想設置在右側的文本，但我不想越過紅線

圖像具有浮動之間浮動：左; + margin-right和內容div設置了一個。

如何在右側進行文本統計？

Answer 1

奇怪的是，應用overflow: hidden您右欄會給你你想要的效果：

HTML：

<div class="content"> 
    <div class="image"> 
     <img src="http://placehold.it/150x150" /> 
    </div> 
    <div class="content"> 
     Banh mi fanny pack selfies disrupt. Small batch art party umami chia bicycle rights flannel fingerstache, wolf single-origin coffee mustache dreamcatcher squid. Odd Future drinking vinegar Echo Park yr. Bicycle rights stumptown PBR, fashion axe put a bird on it raw denim photo booth sriracha synth. Pitchfork chambray next level, photo booth PBR hoodie VHS Blue Bottle squid church-key keytar meh bespoke organic master cleanse. Tousled Williamsburg synth normcore fap. Roof party Thundercats tofu, Cosby sweater Tonx Banksy chambray direct trade Pitchfork disrupt ethical kitsch keffiyeh mlkshk synth. 
    </div> 
</div> 

CSS：

.image { float: left; margin-right: 10px; } 
.content { overflow: hidden; } 

小提琴：

http://jsfiddle.net/m1p981db/

使用除visible以外的overflow，將創建一個新的框上下文，該框避免框重疊。這意味着你的浮動容器和你的內容容器會保持自己，而不是相互纏繞。