我可以让 div 在页面中向下流动而不是在页面上流动吗?
如果我有一个 div 元素集合,我可以使用 CSS 让它们在页面上流动并溢出到下一行。
这是一个简单的例子:
<html>
<head>
<title>Flowing Divs</title>
<style type="text/css">
.flow {
float: left;
margin: 4em 8em;
}
</style>
</head>
<body>
<div class="container">
<div class="flow">Div 1</div>
<div class="flow">Div 2</div>
<div class="flow">Div 3</div>
<div class="flow">Div 4</div>
<div class="flow">Div 5</div>
<div class="flow">Div 6</div>
<div class="flow">Div 7</div>
<div class="flow">Div 8</div>
</div>
</body>
</html>
是否可以让 div 沿着页面向下流动而不是跨过页面,这样它们就会沿着列而不是沿着线流动,但仍然占据与跨过时相同的空间?
因此,对于上面的示例,如果它们流入两行,每行四个 div,我可以让第一列包含 Div1 和 Div2 而不是 Div1 和 Div5 吗?
If I have a collection of div elements, I can use CSS to have them flow across the page and overflow onto the next line.
Here's a simple example:
<html>
<head>
<title>Flowing Divs</title>
<style type="text/css">
.flow {
float: left;
margin: 4em 8em;
}
</style>
</head>
<body>
<div class="container">
<div class="flow">Div 1</div>
<div class="flow">Div 2</div>
<div class="flow">Div 3</div>
<div class="flow">Div 4</div>
<div class="flow">Div 5</div>
<div class="flow">Div 6</div>
<div class="flow">Div 7</div>
<div class="flow">Div 8</div>
</div>
</body>
</html>
Is it possible to have the divs flow down the page instead of across it, so that they would flow down columns not along lines, but still occupy the same space as they would if they flowed across?
So for the example above, if they flowed into two lines of four divs, could I get the first column to contain Div1 and Div2 instead of Div1 and Div5?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
不,这是不可能的。最简单的解决方法是通过添加包装器 DIV 来创建单独的列,然后向每列添加内容。这也可以使用 Javascript 或服务器端动态生成。
No, it is not possible. Easiest workaround is to make separate columns by adding wrapper-DIVs, and then adding content to each column. This could also be generated dynamically either with Javascript or serverside.
快速将其组合在一起:
Quickly threw this together.:
不,你不能,但你可以通过使用绝对定位来随意排列它们。但是,这样做意味着您必须显式设置每个元素的位置,而这通常是不需要的。
不过,对标记进行简单调整即可实现此目的。以下内容是您想看到的吗?
No, you can't, but you could arrange them however you want by using absolute positioning. However, doing so means you have to explicitly set the position of each element, and that is usually undesired.
A simple adjustment to the markup can make this work though. Is the following what you wanted to see?
不幸的是,它不能在纯 html/css 中完成。下面是一个如何在 javascript 中完成此操作的示例。它可以变得更加高效,但更难从中学习。我没有在 IE/Safari 中测试过,但在 FF 中可以工作。
使用方法:
- 将“容器”类添加到流容器中
- 就是这样,
享受吧:)。
Unfortunately it can't be done in pure html/css. Below is an example of how this can be accomplished in javascript. It can be made more efficient, but harder to learn from. I haven't tested in IE/Safari, but works in FF.
How to use:
- Add the class 'container' to the flow container
- thats it
Enjoy :).