将浮动元素直接放置在彼此下方

发布于 2024-10-19 10:56:29 字数 279 浏览 3 评论 0原文

我想显示一排彼此相邻的两个 div，而在下一行中，下一个 div 直接位于最后一个 div 的下方。像这样：

在此处输入图像描述

因为布局必须内置到 CMS 中，所以我不能放置 Box 1， 3 和 2,4 在一个单独的 div 中。有没有一种方法可以在不使用额外包装元素的情况下实现这种行为？（正常的浮动行为不起作用，显示内联/内联块也不起作用。）或者是否需要一些 JavaScript 来构建这样的布局？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

因为看清所以看轻 2024-10-26 10:56:29

由于高度不同，这看起来像是我仍然没有找到通用的纯 CSS 技术来正确处理它的问题，尽管非常努力。

我之前发布过这个答案：css对齐问题

我已经放弃并使用了 jQuery 插件
过去为了某事做这件事
类似：
jQuery Masonry
一图胜千言：

回复收藏 0 原文

一直在等你来 2024-10-26 10:56:29

您可以使用nth-child(odd)来清除float:left;。

css

.box {height:100px;width:100px;float:left;}
.box:nth-child(odd) {clear:left;}
.green {background:green;}
.red{background:red;}
.blue {background:blue;}
.yellow {background:yellow;}

html

<div class="box green">BOX 1</div>
<div class="box red">BOX 2</div>
<div class="box blue">BOX 3</div>
<div class="box yellow">BOX 4</div>

演示： http:// /jsfiddle.net/YSP2S/

请记住，这不适用于 Internet Explorer。您可以使用条件注释和javascript对于 Internet Explorer 也能实现同样的效果。

you can use the nth-child(odd) to clear the float:left;.

css

.box {height:100px;width:100px;float:left;}
.box:nth-child(odd) {clear:left;}
.green {background:green;}
.red{background:red;}
.blue {background:blue;}
.yellow {background:yellow;}

html

<div class="box green">BOX 1</div>
<div class="box red">BOX 2</div>
<div class="box blue">BOX 3</div>
<div class="box yellow">BOX 4</div>

Demo: http://jsfiddle.net/YSP2S/

Keep in mind that this will not work for internet explorer. You can use conditional comment and javascript to achieve the same for internet explorer also.

回复收藏 0 原文

~没有更多了~