0

我们有四个必须显示如下的 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:left为div 2我的div 2并div 3移动到下面的场景结束时，Big Area结果不是真的
你有什么解决方案吗？

感谢任何人，感谢 Anmuson 的 wiki。我阅读了您的Wiki，它描述了我不能float:right在我的情况下使用。然后我试着用另一种方式对你说问题。

看到我有这么多不同宽度和高度div的 s（N 个s）。div我必须div连续显示这个。例如如下：

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

我float全部显示div，left然后全部显示在一行中（此行自动中断与我的窗口宽度相关）。div但我当然需要在某些 s之前休息。例如我需要休息之后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任何其他divs，但遗憾的是它显示如下：

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

哦，我找到了答案..!!!!!! :D :) :D/
你可以在下面看到我的答案

4

3 回答 3

1

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

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

于 2012-06-17T22:55:22.457 回答
1

如果它是一个选项，如果将 div 1、2 和 3 放在容器中，这将是一个更简单的问题。除了 div 1 之外的所有 div 都可以向左浮动。

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

否则，我认为您将很难找到可靠的跨浏览器解决方案。如果 div 具有固定的高度和宽度，您可能可以使用绝对定位来管理某些东西，但这不是一个理想的方法。

于 2012-06-17T23:13:37.943 回答
0

我找到了答案：D
我<br />在div 3我的javascript代码中使用document.createElement如下添加：

var temp = document.createElement('br');
document.getElementById('all_of_div_container').appendChild(temp);

我将我的代码更改为下面，它的工作非常好：

document.getElementById('all_of_div_container').innerHTML += "<br />";

这种方式将相同的代码添加到我的 HTML 但我不知道为什么在新行中appendChild(temp)显示所有float:left项目（正如我所说并在我的问题中绘制）......！
无论如何innerHTML工作得很好。

谢谢
玩得开心；）

于 2012-06-18T09:36:41.897 回答