3

我四处寻找解决此问题的方法，但没有找到任何可行的方法。这有点笨，所以我很抱歉，但我的 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;
}
4

5 回答 5

2

你可以用浮点数来代替：

#leftSideBar{
    width:175px;
    height:100%;
    float: left;
    background-color:#567880;
}
#content{
    height:100%;
    background-color:#00a0a0;
}
于 2013-07-21T19:40:54.860 回答
1

你是对的，你失踪了display:inline-block。Div 是块元素，这意味着默认情况下它们会占用容器宽度的 100%，而不管您设置的宽度如何。通过将它们设置为 inline-block，您可以使其他元素出现在它们旁边。

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

更新了 jsFiddle

于 2013-07-21T19:43:29.580 回答
0

从提供的答案数量可以看出，有几种方法可以实现这一点。最简单的方法之一是将您的 div 包装在一个容器中，并将背景颜色应用于新元素。Float #leftSideBar，您的#contentdiv 将位于它旁边。

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

小提琴

于 2013-07-21T19:43:45.410 回答
0

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

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

#leftSideBar{
width:25%;
height:100%;
float: left;
background-color:#567880;}
于 2013-07-21T19:44:17.290 回答
0 
#leftSideBar{
    width:175px;
    height:100%;
    background-color:#567880;
    float:left;
}
于 2013-07-21T19:45:58.873 回答