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，将创建一个新的框上下文，该框避免框重叠。这意味着你的浮动容器和你的内容容器会保持自己，而不是相互缠绕。