Question

例如，在此页面上，您会看到float:right内有.container的3张图片，这些图片有红色边框： http://cis.scc.losrios.edu/~cisw320b_stu022/sccwa-snapshot1/

图片开始中途，因为这是他们最初放置在左边内容的位置。

如何让它们一直到顶部（最好是CSS）？

编辑2011年11月8日下午4:06 ：尝试调整浏览器大小以使其越来越小，您会看到图片内嵌。这是因为随着浏览器的大小缩小，float：right属性被删除，以便图像内联到与代码中相同的位置。我不能简单地将<aside>元素放在所有<p>元素之前，因为当您缩小浏览器时，图像将不再处于正确的位置。

编辑11/8/2011 4:11 pm：所以基本上我想要它，所以当窗口较小时，所有旁边都显示在正确的内联位置，但是当浏览器窗口较大时，所有图像都应显示在右侧，就好像它们位于右侧的边栏中一样。

这可以用CSS吗？

编辑11/8/2011 4:16 pm：该网站应该故意收缩。尝试调整浏览器的大小，使其达到iPhone或Android的宽度。 <aside>元素显示在内联的位置。但是当桌面上的浏览器是完整大小时，我希望<aside>元素从右上角浮动。

这可能是CSS，还是我必须使用Javascript？

Answer 1

将旁边的元素放在主div中的所有p元素之前。

而不是：

<p>...</p>
<p>...</p>
<aside>...</aside>
<p>...</p>
<p>...</p>
<aside>...</aside>
<p>...</p>

使用：

<aside>...</aside>
<aside>...</aside>
<aside>...</aside>
<p>...</p>
<p>...</p>
...

更新：仅为手机制作新的CSS规则/样式表：#main aside {float：none;}。有关详细信息，请参阅this。

Answer 2

将<aside>标记放在<p> div中的#main标记上方。

Answer 3

浮动<p>，inline-block <aside>的... {http://jsfiddle.net/LuckyKind/KH8wA/

p, ul, ol, dl, blockquote {
    max-width: 40em; /* Optimal width for long-form text */
    float:left;
}

aside {
    display:inline-block;
    width: 18em;
    height:auto;
}

Answer 4

答案是，没有Javascript，我想要的就是不可能。

HTML / CSS：如何制作正确的浮动顶部而不是漂浮在它们内联时的位置？

4 个答案: