36

所以我一直在尝试将两个 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>

4

4 回答 4

45

此答案可能必须根据您尝试使用position: fixed;. 如果您想要的只是并排的两列，请执行以下操作：

http://jsfiddle.net/8weSA/1/

我将两列都向左浮动。

注意：出于说明目的，我添加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>

如果您希望在滚动时左栏保持原位，请执行以下操作：

http://jsfiddle.net/8weSA/2/

position: relative;在这里，我们在添加to#wrapper和position: fixed;to时将右列浮动到右侧#leftcolumn。

注意：我再次用于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>

于 2013-08-20T21:18:31.077 回答
6

尝试这个：

<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

于 2013-08-20T21:15:59.717 回答
1

我这样做了：

<!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>

所以基本上我只是制作了另一个 div 来包裹粉红色和黄色，我让那个 div 有一个 float:left 就可以了。蓝色 div 上有一个 float:right 。

于 2016-06-09T04:19:10.963 回答
0

你的代码是正确的。请标记小的更正。

#rightcolumn {
     width: 750px;
     background-color: #777;
     display: block;
     **float: left;(wrong)**
     **float: right; (corrected)**
     border: 1px solid white;
}
于 2018-02-25T06:37:24.973 回答