Html 如何使用具有固定位置 div/ 的浮动、清除和溢出元素并排对齐两个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18344904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/
提问by Esteban Rodriguez
So I've been trying to align two divs side by side without overlapping. I have one div which will be fixed as a sidebar and the right div as the content. Hopefully, someone can help me.
所以我一直在尝试将两个 div 并排对齐而不重叠。我有一个 div 将固定为侧边栏，右侧 div 作为内容。希望有人可以帮助我。
body {
background-color: #444;
margin-top: 0;
margin-bottom: 0;
}
#wrapper {
width: 1005px;
margin: 0 auto;
padding: 0;
overflow: auto;
}
#leftcolumn {
width: 250px;
background-color: #111;
padding: 0;
margin: 0;
display: block;
border: 1px solid white;
position: fixed;
}
#rightcolumn {
width: 750px;
background-color: #777;
display: block;
float: left;
border: 1px solid white;
}<div id="wrapper">
<div id="leftcolumn">
</div>
<div id="rightcolumn">
</div>
</div>回答by hungerstar
This answer may have to be modified depending on what you were trying to achieve with position: fixed;. If all you want is two columns side by side then do the following:
根据您尝试使用position: fixed;. 如果您只想要并排的两列，请执行以下操作：
I floated both columns to the left.
我将两列都向左浮动。
Note:I added min-heightto each column for illustrative purposes and I simplified your CSS.
注意：我添加min-height到每一列是为了说明目的，并简化了您的 CSS。
body {
background-color: #444;
margin: 0;
}
#wrapper {
width: 1005px;
margin: 0 auto;
}
#leftcolumn,
#rightcolumn {
border: 1px solid white;
float: left;
min-height: 450px;
color: white;
}
#leftcolumn {
width: 250px;
background-color: #111;
}
#rightcolumn {
width: 750px;
background-color: #777;
}<div id="wrapper">
<div id="leftcolumn">
Left
</div>
<div id="rightcolumn">
Right
</div>
</div>If you would like the left column to stay in place as you scroll do the following:
如果您希望左栏在滚动时保持原位，请执行以下操作：
Here we float the right column to the right while adding position: relative;to #wrapperand position: fixed;to #leftcolumn.
在这里，我们将右列浮动到右侧，同时添加position: relative;到#wrapper和position: fixed;到#leftcolumn。
Note:I again used min-heightfor illustrative purposes and can be removed for your needs.
注意：我再次用于min-height说明目的，可以根据您的需要删除。
body {
background-color: #444;
margin: 0;
}
#wrapper {
width: 1005px;
margin: 0 auto;
position: relative;
}
#leftcolumn,
#rightcolumn {
border: 1px solid white;
min-height: 750px;
color: white;
}
#leftcolumn {
width: 250px;
background-color: #111;
min-height: 100px;
position: fixed;
}
#rightcolumn {
width: 750px;
background-color: #777;
float: right;
}<div id="wrapper">
<div id="leftcolumn">
Left
</div>
<div id="rightcolumn">
Right
</div>
</div>回答by peterchon
Try this:
尝试这个：
<div id="wrapper">
<div class="float left">left</div>
<div class="float right">right</div>
</div>
#wrapper {
width:500px;
height:300px;
position:relative;
}
.float {
background-color:black;
height:300px;
margin:0;
padding:0;
color:white;
}
.left {
background-color:blue;
position:fixed;
width:400px;
}
.right {
float:right;
width:100px;
}
jsFiddle: http://jsfiddle.net/khA4m
jsFiddle：http: //jsfiddle.net/khA4m
回答by Zeke Young
I did this:
我这样做了：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AutoDealer</title>
<style>
.container{
width: 860px;
height: 1074px;
margin-right: auto;
margin-left: auto;
border: 1px solid red;
}
.nav{
}
.wrapper{
display: block;
overflow: hidden;
border: 1px solid green;
}
.otherWrapper{
display: block;
overflow: hidden;
border: 1px solid green;
float:left;
}
.left{
width: 399px;
float: left;
background-color: pink;
}
.bottom{
clear: both;
width: 399px;
background-color: yellow;
}
.right{
height:350px;
width: 449px;
overflow: hidden;
background-color: blue;
overflow: hidden;
float:right;
}
</style>
</head>
<body>
<div class="container">
<div class="nav"></div>
<div class="wrapper">
<div class="otherWrapper">
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies aliquet tellus sit amet ultrices. Sed faucibus, nunc vitae accumsan laoreet, enim metus varius nulla, ac ultricies felis ante venenatis justo. In hac habitasse platea dictumst. In cursus enim nec urna molestie, id mattis elit mollis. In sed eros eget nibh congue vehicula. Nunc vestibulum enim risus, sit amet suscipit dui auctor et. Morbi orci magna, accumsan at turpis a, scelerisque congue eros. Morbi non mi vel nibh varius blandit sed et urna.</p>
</div>
<div class="bottom">
<p>ucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesq</p></div>
</div>
<div class="right">
<p>Quisque vulputate mi id turpis luctus, quis laoreet nisi vestibulum. Morbi facilisis erat vitae augue ornare convallis. Fusce sit amet magna rutrum, hendrerit purus vitae, congue justo. Nam non mi eget purus ultricies lacinia. Fusce ante nisl, efficitur venenatis urna ut, pellentesque egestas nisl. In ut faucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesque maximus. Quisque a tempus lectus.</p>
</div>
</div>
</div>
</body>
So basically I just made another div to wrap the pink and yellow, and I make that div have a float:left on it. The blue div has a float:right on it.
所以基本上我只是做了另一个 div 来包裹粉红色和黄色，我让那个 div 有一个 float:left 。蓝色 div 上有一个 float:right 。
回答by Pushp Singh
Your code is correct. Kindly mark small correction.
你的代码是正确的。请标记小更正。
#rightcolumn {
width: 750px;
background-color: #777;
display: block;
**float: left;(wrong)**
**float: right; (corrected)**
border: 1px solid white;
}
