Question

我不知道如何更好地表达我的头衔，所以我会在这里解释一下。我有一个包含3个div的HTML / CSS页面。

第一个div.presentation没有浮动规则。我想在右边做菜单。

所以我得到了另外两个div，div.login和div.categories。他们都有float: right;和clear: both;。

我想要这样的东西：

 --------------------------------------     ------------------
|div.presentation                      |   |div.login         |  
|                                      |   |                  |
|                                      |   |                  |
|                                      |   |                  |
|                                      |    ------------------
|                                      |
|                                      |    ------------------
|                                      |   |div.categories    |
|                                      |   |                  |
|                                      |   |                  |
|                                      |   |                  |
 --------------------------------------     ------------------

但div.login和div.categories彼此相邻。当div.categories不存在时，浮动规则运作良好。

当我在<div style="height:100px"></div>和div.login之间加div.categories时，我有我想要的，但我相信我们可以做得更好。这也是基于运气。

这3个div是display:inline-block。

有什么想法吗？非常感谢。

编辑 http://jsfiddle.net/7nJp9/1/

Answer 1

我修改了你的css：

body {
width: 90%;
margin: auto;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
background: #e6f0ff;
}

header.beta {
position: absolute;
top: 0;
left: 0;
width: auto;
background: #fff7e0;
opacity: 0.8;
padding: 10px 50px;
color: #444443;
}

header.logo {
width: 90%;
height: 125px;
margin: auto;
margin-top: 60px;
margin-bottom: 30px;
border: 1px dotted grey;
}

nav.tabs {
display: none;
}
div.presentation, div.login, div.categories {
position: relative;
margin-top: 10px;
display: inline-block;
}

div.right {
position: relative;
float: right;
width: 25%;
}

div.presentation {
width: 70%;
clear: both;
}

div.login, div.categories {
width: 100%;
clear: both;
}

div.login header, div.presentation header, div.categories header {
font-size: 14px;
background: #0a97e2;
padding: 3px 15px;
color: white;
border-radius: 10px 10px 0 0;

}

div.login section, div.presentation section, div.categories section {
/*position: absolute;*/
width: 100%;
background: white;
border-radius: 0 0 5px 5px;
}

div.login section p, div.presentation section p {
/* changed this */
margin: 0px 10px;
padding: 3px 10px 3px 10px;
}

div.login section input {
display: block;
margin: auto;
margin-bottom: 10px;
}

/* added this */
div.categories ul {
margin: 0px 10px;
padding: 3px 10px 3px 10px;

}

Answer 2

HTML

<div class="left">
 <div class="presentation"></div>
</div>
<div class="right">
 <div class="login"></div>
 <div class="categories"></div>
</div>

CSS

.left { 
  float: left; 
}
.right { 
  float: right; 
}

Answer 3

<div style="width:430px; height:430px; border:1px solid;">
    <div style="width:230px; height:100%; float:left; background:#000;"></div>
    <div style="width:180px; float:right; height:150px; border:1px solid;  margin-top:20px;  margin-right:10px;"></div>
    <div style="width:180px; float:right; height:150px; margin-top:20px; margin-right:10px; border:1px solid;"></div
</div>

尝试使用

使2个div浮动：右边一个在另一个之下

3 个答案: