Question

我试图在HTML页面中水平对齐两个div元素：一个是左侧的导航菜单，显式设置为180px宽，右侧是主页面内容。有没有办法让正确的div占据宽度的其余部分？我到目前为止的代码如下所示，但将section div放在nav div之下，而不是放在它旁边。

HTML：

<div class="nav"> </div>
<div class="section"> </div>

CSS：

div.nav {
    float: left;
    height: auto;
    width: 180px;
}

div.section {
    float: right:
    height: auto;
    width: 100%;
    margin-left: 180px;

我最初尝试将position设置为fixed和height到100%：这给出了正确的布局但没有垂直滚动！我还尝试将导航div float设置为left，当没有设置宽度但没有填充屏幕的其余部分时（虽然为了清晰起见省略了颜色）。

如果可能的话，我想避免使用表格。另外，我很欣赏这两个div元素可以替换为HTML5 <nav>和<section>。

Answer 1

我的解决方案是浮动菜单，然后在另一个div上设置'补偿'填充。

http://jsfiddle.net/D5qfY/12/

HTML：

<nav class="menu"> </nav>
<section class="something"></section>

CSS：

nav.menu {
float: left;
width: 180px;
background: yellow;
height:400px;
}

section.something {
padding-left: 180px;
width: 100%;
height: 400px;
background: red;
box-sizing: border-box;
}

希望有所帮助。

Answer 2

删除margin-left: 180px; 这将使正确的div适合剩余的屏幕
http://jsfiddle.net/D5qfY/embedded/result/
http://jsfiddle.net/D5qfY/5/embedded/result/
http://jsfiddle.net/D5qfY/6/embedded/result/
从网址中删除 embedded/result/以查看代码

Answer 3

试试这个，它对我有用：

div.nav {
    float: left;
    width: 10%;
}

div.section {
    float: right:
    width: 90%;
}

对不起，对不起其他人，我不知道导航和部分。

Answer 4

最简单的方法是为元素提供表的行为。

http://jsfiddle.net/AcMc5/2/

.container {
    display: table;
    width: 100%;
}

nav, section {
    display: table-cell;
}

nav {
    width: 12em;
    background: #CCC;
}

<div class="container">
    <nav>Nav</nav>
    <section>Lorem ipsum dolor sit amet...</section>
</div>

或者，您可能不会浮动应该占用剩余宽度的元素：

http://jsfiddle.net/D5qfY/3/

section {
    background: #F00;
    margin-left: /* width of floated sibbling */;
}

Answer 5

试试这个例子。这对你有用。

CSS

    #left {
    display: table-cell;
    min-width: 160px;
   border:1px solid #000;
}
#right {
    display: table-cell;
    width: 100%;
    vertical-align: top;
    border:1px solid #ccc;
  /*text-align:right;*/
}

<强> HTML

<nav id="left">
    Left
</nav>
<section id="right">
    right
</section >

Answer 6

你不需要漂浮两个容器。您可以浮动导航并让其他容器自动填充父级的完整大小。 overflow 属性可以帮助定位和间距。

.nav {
    background: lightgrey;
    float: left;
    padding: 10px;
    width: 180px;           
}

.section {
    background: grey;
    overflow: auto;
    padding: 10px;
}

您可以将两者都包装在父容器中以控制两个容器的宽度。

.contain {
    margin: 0 auto;
    width: 980px;
    border: 1px solid;
    overflow: auto;
}

<div class="contain">
    <div class="nav"> nav </div>
    <div class="section"> section </div>    
</div>

Answer 7

您应为width: auto;定义section。或者设置如下：

<div class="wrap">
<div class="nav"></div>
<div class="section"></div>
</div>

...的CSS

div.wrap{background: red; width: 100%;display: inline-block;}
div.nav {
    float: left;
    height: auto;
    width: 180px;
    background-color: blue;
}

div.section {
    float: right:
    height: auto;
    width: auto;
    margin-lef/t: 180px; /* this need not to place coz you have floated it right*/
}

请参阅 Fiddle

Answer 8

使用浮动/溢出隐藏方法

HTML：

   <nav class="menu">Menu</nav>
    <section class="something">Remainder</section>

CSS：

.menu {
    float: left;
    width: 180px;
    background: yellow;
    height:400px;
}

.something {
    background: red;
    float: none;
    overflow: hidden;
    display: block;
    zoom: 1;
}

小提琴：http://jsfiddle.net/passionatepaul/YC87B/

其他方法可以在http://css-response.com/css-remainder/

找到

在HTML中，如果另一个显式设置，div如何取宽度的其余部分？

8 个答案: