html - CSS div 没有 float 在图片旁边

Question

我正在尝试进行响应式设计。当屏幕很小时，注释应该在“Slikica”(青色 DIV)下方。但是当我在桌面版本上时，我希望评论(灰色 div)围绕图像扭曲。

• 青色div固定宽度，向左浮动。
• 灰色 div 的长度未知(最多 200 个字符)，它们应该与青色 div 相对应。它们也向左浮动。
• 如果我设置它们的宽度，例如 300px，一切都会正常。

看下面的图片，值(value)千字。

<div id="content">
    <div id="slikica">Slikica</div>
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum dui ut enim rutrum congue. Nulla ut odio vel metus pharetra aliquet. Proin nec erat non nisl semper sagittis. Pellentesque sed.</div>
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet interdum enim eget sollicitudin. Praesent eleifend interdum odio sit amet luctus. Nulla egestas eros vitae dui tincidunt amet.</div>
    <div class="gray">Quisque non ligula id dolor tincidunt imperdiet at et libero. Cras eu sapien mi. Phasellus sollicitudin accumsan vehicula. In fermentum, sapien vitae ullamcorper porttitor, felis sem dapibus est amet.</div>
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum dui ut enim rutrum congue. Nulla ut odio vel metus pharetra aliquet. Proin nec erat non nisl semper sagittis. Pellentesque sed.</div>
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet interdum enim eget sollicitudin. Praesent eleifend interdum odio sit amet luctus. Nulla egestas eros vitae dui tincidunt amet.</div>
    <div class="gray">Quisque non ligula id dolor tincidunt imperdiet at et libero. Cras eu sapien mi. Phasellus sollicitudin accumsan vehicula. In fermentum, sapien vitae ullamcorper porttitor, felis sem dapibus est amet.</div>
    <br class="clrfix" />
</div>

jsFiddle link

Answer 1

只需删除注释 DIV 上的 float: left;。当将每个评论向左浮动到前一个评论时，它们将不适合视口(viewport)。

http://jsfiddle.net/feeela/Xtuc9/1/