Question

我已经四处寻找解决这个问题的方法，但我找不到任何有用的方法。这有点不道德，所以我道歉但我的CSS有点生锈。

我想做的就是让2个div元素水平并排排列，占据窗口高度和宽度的100％。左边的div将有一个固定的宽度值，而右边的div将占用剩余的空间。

解决方案可能非常简单，我确信我错过了CSS的一个基本概念，这导致了这个问题，所以如果你可以帮助我，也许可以指点我一些文献来帮助我理解我做错了什么我我真的很感激。

html代码：

<div id="leftSideBar">Left Sidebar</div>
<div id="content">Content</div>

CSS：

html, body{
    height: 100%;
    width: 100%;
}
#leftSideBar{
    width:175px;
    height:100%;
    background-color:#567880;
}
#content{
    width:100%;
    height:100%;
    background-color:#00a0a0;
}

Answer 1

你可以用浮点数代替它：

#leftSideBar{
    width:175px;
    height:100%;
    float: left;
    background-color:#567880;
}
#content{
    height:100%;
    background-color:#00a0a0;
}

Answer 2

你是对的，你错过了display:inline-block。 Div是块元素，这意味着默认情况下，无论您设置的宽度如何，它们都会占用容器宽度的100％。通过将它们设置为内联块，可以使其他元素与它们一起显示。

#leftSideBar
{
    width:175px;
    height:100%;
    background-color:#567880;
    display:inline-block;
}
#content
{
    height:100%;
    background-color:#00a0a0;
    display:inline-block;
}

Updated jsFiddle

Answer 3

正如您所提供的答案数量所示，有几种方法可以实现这一目标。最简单的方法之一是将div包装在容器中，并将背景颜色应用于新元素。浮动#leftSideBar，您的#content div将位于其旁边。

<强> HTML

<div id="container">
    <div id="leftSideBar">Left Sidebar</div>
    <div id="content">Content</div>
</div>

<强> CSS

html, body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 100%;
    background-color:#00a0a0;
}
#leftSideBar{
    width:175px;
    float: left;
    height:100%;
    background-color:#567880;
}
#content{
    height:100%;
}

Fiddle

Answer 4

通过将内容div设置为100％，您将占用其容器的100％。如果你想让它们共享，那么你需要分配它们之间的百分比并使用浮点数，即：

#content{
width:75%;
height:100%;
background-color:#00a0a0;
float:left;}

#leftSideBar{
width:25%;
height:100%;
float: left;
background-color:#567880;}

Answer 5

#leftSideBar{
    width:175px;
    height:100%;
    background-color:#567880;
    float:left;
}

CSS3 - Div宽度= 100％将内容推送到新行而不是使用剩余空间

5 个答案: