0

我正在尝试进行响应式设计。当屏幕很小的时候，评论应该在“Slikica”（Cyan DIV）下面。但是当我在桌面版本上时，我希望评论（灰色 div）在图像周围扭曲。

  • 青色 div 具有固定宽度，并且向左浮动。
  • 灰色 div 的长度未知（最多 200 个字符），它们应该是青色 div。它们也向左浮动。
  • 如果我将它们设置为宽度，例如 300 像素，一切都会正常工作。

看下图，价值千言万语。

显示问题

<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 链接

4

4 回答 4

2

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

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

于 2012-05-04T14:19:20.770 回答
1

尝试将以下 CSS 添加到评论div元素中：

display:inline;
于 2012-05-04T14:04:11.860 回答
0

如果您float: left;从灰色 div 中删除并添加等于（或大于）青色 div 宽度的左边距，它们将占据右侧的空间。如果有更多的灰色 div，它们将不会因为边距而环绕青色 div。我不知道是否需要这种行为。否则，您可以跳过边距和浮动，并让它们环绕青色 div。

于 2012-05-04T14:20:34.560 回答
-1

问题是您的 div 将扩展以达到其容器的最大宽度（在这种情况下为<div id="content">）。当它们的宽度太大而无法容纳蓝色时，它们就会被夹下来。你需要的是放置一些东西来阻止它们达到那个宽度。

你有两个选择来做到这一点。

  1. 放置一个带有 a 的 div width: 600px（或任何适合该空间的）并将每个灰色 div 放入其中。JSFiddle（您需要展开结果窗口以查看它是否有效）
  2. max-width在每个 div 上放一个（例如max-width: 600px：）
于 2012-05-04T14:08:03.327 回答