如何使用float，clear和overflow元素并排排列两个div，并使用固定位置div / [英] How to align two divs side by side using the float, clear, and overflow elements with a fixed position div/

问题描述

所以我一直在试图对齐两个div并排，不重叠。我有一个div将被固定为一个侧边栏和右div作为内容。希望有人能帮助我。

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.

HTML：

<div id="wrapper">
    <div id="leftcolumn">
    </div>
    <div id="rightcolumn">
    </div>
</div>

CSS：

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

推荐答案

修改取决于你想用 position：fixed; 来实现。如果您想要的是两列并排，则只需执行以下操作：

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 simply do the following:

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

我只是将两列悬浮在左边。

I simply floated both columns to the left. I added min-height to each column for illustrative purposes.

HTML p>

HTML

<div id="wrapper">
    <div id="leftcolumn">
        Left
    </div>
    <div id="rightcolumn">
        Right
    </div>
</div>

- 您会注意到我已简化您的CSS

CSS - you'll notice I simplified your 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;
}

如果您希望左栏保持原位，以下内容：

If you would like the left column to stay in place as you scroll do the following:

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

这里我们向右移动右列，同时将 position：relative; 添加到 #wrapper 和 position：fixed; 到 #leftcolumn 。我再次使用 min-height 作为说明，可以根据您的需要删除。

Here we float the right column to the right while adding position: relative; to #wrapper and position: fixed; to #leftcolumn. I again used min-height for illustrative purposes and can be removed for your needs.

/ em>

CSS

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

这篇关于如何使用float，clear和overflow元素并排排列两个div，并使用固定位置div /的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！