4

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

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;

我最初尝试设置positiontofixed和heightto 100%：这给出了正确的布局，但没有垂直滚动！我还尝试将导航 div 设置为float在left没有设置宽度时起作用，但没有填满屏幕的其余部分（为清楚起见，省略了颜色）。

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

4

8 回答 8

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;
}

希望有帮助。

于 2013-03-30T13:25:54.147 回答
0

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

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 >
于 2013-03-30T12:37:39.690 回答
0

You don't need to float both containers. You can float the nav and let the other container automatically fill the full size of the parent. The overflow property can help with positioning and spacing.

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

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

You can wrap both inside a parent container to control the width of both containers.

.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>
于 2013-03-30T12:57:29.847 回答
0

使用浮动/溢出隐藏方法

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/找到

于 2013-11-16T09:57:28.480 回答
0

您应该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*/
}

看到这个小提琴

于 2013-03-30T12:59:06.077 回答
0

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

于 2013-03-30T12:27:40.363 回答
0

试试这个，它对我有用：

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

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

抱歉，帮不了其他人，我不知道导航和部分。

于 2013-03-30T12:30:33.653 回答
0

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

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 */;
}
于 2013-03-30T12:31:51.277 回答