gpt4 book ai didi

css - 如何将所有元素 float 到左侧并清除右侧以同时显示下面的几个元素?

转载 作者:太空宇宙 更新时间:2023-11-04 05:03:08 25 4
gpt4 key购买 nike

我们有四个必须显示如下的div:

|--------|------|
|Big Area|div 1 |
| |------|-------|
| |div 2 | div 3 |
| |------|-------|
| |
| |
| |
| |
|--------|

我试试这个:

<html><head>
<style>
#big_area {
float: left;
width: 200px;
height: 200px;
}
#div_1 {
float: left;
clear: right;
}
#div_2 {
float: left;
}
#div_3 {
float: left;
}
</style>
</head>

<body>
<div id="big_area">big area</div>
<div id="div_1">div 1</div>
<div id="div_2">div 2</div>
<div id="div_3">div 3</div>
</body>
</html>

但它不起作用。当我设置 clear:leftdiv 2我的div 2div 3移动到 Big Area 下面的场景结尾这不是真正的结果
你有什么解决办法吗?

感谢任何人,感谢 Animuson 的 wiki。我读了你的Wiki它描述了我不能使用 float:right就我而言。然后我试着用另一种方式告诉你问题。

看我有这么多div s(N 个 div s)具有不同的宽度和高度。我必须出示这个div连续。例如如下:

|-----|-----|-----|-----|-----|-----|-------|-----|
|Div 1|Div 2|Div 3|Div 4|Div 5| ... |Div N-1|Div N|
|-----|-----|-----|-----|-----|-----|-------|-----|

float所有 div s 至 left然后所有这些都显示在一行中(这一行会自动与我的窗口宽度相关)。但我需要在 div 之前休息一下当然。例如我需要在 Div 3 之后休息.
然后我尝试添加 clear:left到我的div 4 ,它工作得很好,我的 div 4之后的任何数字 (div 5, ..., N-1, N) 显示在新行中,但如果我的 div 1有很大的高度(像 Big Area )我不会我的另一个 div请转到下面的 Big Area但他们与clear:left一起去解决方案。看下面的结果:

|-------|-----|-----|
| Big |Div 2|Div 3|
| Area |-----|-----|
|(div 1)|
| |
|-------|
|-----|-----|-----|-------|-----|
|Div 4|Div 5| ... |Div N-1|Div N|
|-----|-----|-----|-------|-----|

因为我尝试添加 <br />div 3 之后标记然后 div 4和任何其他div之后移动到新行但遗憾的是它如下所示:

|-------|-----|-----|
| Big |Div 2|Div 3|<br />
| Area |-----|-----|
|(div 1)|Div 4|
| |-----|
| |Div 5|
| |-----|
| | ... |
| |-----|
| | N-1 |
| |-----|
| | N |
| |-----|
| |
|-------|

哦,我找到了答案..!!!!!! :D :) :D/
你很快就会在下面看到我的回答

最佳答案

CSS:

#big_area {
display: inline-block;
float: left;
width: 200px;
height: 200px;
}

​#div_2, #div_3 {
display: inline;
}​

HTML:

<div id="big_area">big area</div>
<div id="div_1">div 1</div>
<div id="div_2">div 2</div>
<div id="div_3">div 3</div>

JSFiddle Link

除非您尝试用它做更多您没有说的事情,否则这应该可以正常工作。在这种情况下清除是不必要的。除非您将元素指定为 inlineinline-block,否则默认情况下该行将在 div_1 之后换行。

关于css - 如何将所有元素 float 到左侧并清除右侧以同时显示下面的几个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11075365/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com