如何将此 div 列浮动到右侧

Question

我是一年级的网页设计师，我目前正在做一项任务，它需要并排浮动两个内容。每次我将右侧内容浮动到右侧时，我都会：1）丢失整个包装器2）内容不会浮动在左侧内容
旁边你们知道我做错了什么吗？
这是我的HTML代码：

<div id="wrapper">
    <header></header>
    <nav>
    </nav>
    <div id="content">
        <div id="left">
            <img src="Images/headerOne.png" width="356" height="46" alt="Top Quality Lumber" title="Top Quality Lumber">
            <p>Misty Mountain Wood Products is located just east of Edson in beautiful Yellowhead County, Alberta. We offer a complete service from cutting the tree to the finished product. Our mill produces top quality Canadian timber and lumber.</p>
            <img src="Images/headerTwo.png" width="356" height="46" alt="Board and Batten siding" title="Board and Batten">
            <p>Use our unedged boards (2nd-cut slabs) to create rustic Board-on-Board siding on pole or frame buildings. Great for animal shelters, machine sheds, hay sheds, garden shed, playhouse, barns, wind fencing etc...</p>
            <img src="Images/headerThree.png" width="356" height="46" alt="Deal Direct with the Mill" title="Deal Direct">              
            <p>this is where you write whatever</p>
        </div><!--this is the end of the left div-->
    </div> <!--this is the end of the content-->
    <div id="column">
        <img src="Images/shed01.jpg" alt="shed" title="shed">
        <img src="Images/batten01.jpg" alt="batten" title="batten">
        <img src="Images/shed02.jpg" alt="shed2" title="shed2">
    </div><!--this is the end of the column-->
</div><!--this is the end of the wrapper-->

和我的 CSS

#wrapper{width: 960px;
margin: 0 auto;
background-color: #4c5834;}

#content{padding-bottom: 10px;
padding-left: 20px;
width: 940px;
float: left;
color: #ffffff;}
#left{width: 600px;
padding-top: 20px;
padding-right: 15px;
padding-left: 15px;
float: left;
background-color: #838b73;}
#column{width: 220px;
background-color: #838b73;
padding-top: 25px;
padding-left: 15px;
padding-right: 15px;
float: right;
margin: 0 auto;}

目前这完全让我感到沮丧，我不知道该怎么办

Answer 1

将 float：left 添加到包装类中

并将带有 id 列的div 移动到内容div 内部。

这里的例子 http://jsfiddle.net/S6g6H/1/

目录

<div id="wrapper">
    <header></header>
    <nav>
    </nav>
    <div id="content">
        <div id="left">
            <img src="Images/headerOne.png" width="356" height="46" alt="Top Quality Lumber" title="Top Quality Lumber">
            <p>Misty Mountain Wood Products is located just east of Edson in beautiful Yellowhead County, Alberta. We offer a complete service from cutting the tree to the finished product. Our mill produces top quality Canadian timber and lumber.</p>
            <img src="Images/headerTwo.png" width="356" height="46" alt="Board and Batten siding" title="Board and Batten">
            <p>Use our unedged boards (2nd-cut slabs) to create rustic Board-on-Board siding on pole or frame buildings. Great for animal shelters, machine sheds, hay sheds, garden shed, playhouse, barns, wind fencing etc...</p>
            <img src="Images/headerThree.png" width="356" height="46" alt="Deal Direct with the Mill" title="Deal Direct">              
            <p>this is where you write whatever</p>
        </div><!--this is the end of the left div-->

                    <div id="column">
        <img src="Images/shed01.jpg" alt="shed" title="shed">
        <img src="Images/batten01.jpg" alt="batten" title="batten">
        <img src="Images/shed02.jpg" alt="shed2" title="shed2">
    </div><!--this is the end of the column-->

                </div> <!--this is the end of the content-->

</div><!--this is the end of the wrapper-->

.CSS

#wrapper{width: 960px;
margin: 0 auto;
background-color: #4c5834;
float:left;
}

#content{padding-bottom: 10px;
padding-left: 20px;
width: 940px;
float: left;
color: #ffffff;}
#left{width: 600px;
padding-top: 20px;
padding-right: 15px;
padding-left: 15px;
float: left;
background-color: #838b73;}
#column{width: 220px;
background-color: #838b73;
padding-top: 25px;
padding-left: 15px;
padding-right: 15px;
float: right;
margin: 0 auto;}

Answer 2

将 CSS 更改为：

#wrapper{
    width: 960px;
    margin: 0 auto;
    background-color: #4c5834;
}

#content{
    padding-bottom: 10px;
    padding-left: 20px;
    width: 600px;
    float: left;
    color: #ffffff;
}
#left{
    padding-top: 20px;
    padding-right: 15px;
    padding-left: 15px;
    background-color: #838b73;
/****I removed the width and float from here****/
}
#column{
    background-color: #838b73;
    padding-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    width:200px;
    margin: 0 10px;
}

这是一个小提琴：http://jsfiddle.net/YpukY/

正如您所知，您希望两列的总宽度（对象宽度 + 填充 + 边距 + 边框）小于容器的宽度。

您可以将它们都向左浮动，只要它们不是太宽，它们就会并排放置。

Answer 3

不确定您是否希望column div float主div的左侧，或者想要在您的left旁边有一个rightdiv。

我在这里添加了两者：http://jsfiddle.net/nivas/afZx6/

这个想法是包装器的宽度应该足够大（宽），以并排放置所有div。如果不是，浮动的div将环绕到"下一行"。

新的 HTML（删除了一些内容以使事情更清晰）：

<div id="wrapper">
    <header></header>
    <nav></nav>
    <div id="content">
        <div id="left">
            <p>this is where you write whatever</p>
        </div>
        <div id="right">A new column, within the "content"</div>
    </div>
    <div id="column">The far right column</div>
</div>

所以在下面的 CSS 中，

width(2) should be >= width(3) + margin(3) + padding(3) + width(4) + margin(4) + padding(4)
width(1) should be >= width(2) + margin(2) + padding(2) + width(5) + margin(5) + padding(5)

（为了清楚起见，再次删除了一些规则）：

#wrapper {  /*1*/
    width: 700px; 
    background-color: #4c5834;
}
#content { /*2*/
    width: 500px;  
    float: left;
    color: #ffffff;
    background-color: #ededed;
}
#left { /*3*/
    width: 300px; 
    float: left;
    background-color: #838b73;
}
#right { /*4*/
    background-color: yellow;
    float: left;
    height: 55em;
    color: black;
    width: 150px; 
}
#column { /*5*/
    width: 40px;
    background-color: #838b73;
    float: left;
    height: 35em; 
}

Answer 4

您的右column没有浮动在左content旁边，因为wrapper中没有足够的空间。 您的wrapper 960px，左content 940px - 旁边没有空间放置220px column。

至于包装器，看起来您需要添加一个height分配;否则wrapper 960px x 0px

Answer 5

您将 940px 的 #content 浮动到左侧，将 #column 的 220px 浮动到右侧。#wrap 有 960 像素，因此 #content 和 #column 都不适合 #wrap。因此，如果您的建议是用 #column 浮动 #content，那么您必须减小宽度。如果你的建议是用 #column 漂浮 #left，你必须把 #left 和 #column 放在里面 #content

Answer 6

您需要

为"#wrapper"提供适当的大小以包含"#content"和"#column"，这样您就不会再看到此特定问题。

例如：总"#content"宽度（"宽度"640+"填充"20）+ 总"#column"宽度（"宽度"220+"填充"15+15） = 适当的"#wrapper"宽度960+250 = 1210像素然后你会得到你想要的。

然而，您会发现另一个问题，如果您为"#wrapper"声明了背景，您将看不到它，因为包装器将无法定义浮动元素的大小。要解决此问题，请在结束包装器之前添加下一个"

"。

此外，"我认为"如果你将"#column"的浮动设置为左而不是右，你会得到同样的效果，你会更容易理解发生了什么。

希望它澄清了这个问题;否则我很乐意提供更多解释。

祝你好运！

在行动中：

<div id="wrapper">
    <div id="content">
            <div id="left">
                <img src="Images/headerOne.png" width="356" height="46" alt="Top Quality Lumber" title="Top Quality Lumber">
                <p>Misty Mountain Wood Products is located just east of Edson in beautiful Yellowhead County, Alberta. We offer 
                a complete service from cutting the tree to the finished product. Our mill produces top quality Canadian timber 
                and lumber.</p>
                <img src="Images/headerTwo.png" width="356" height="46" alt="Board and Batten siding" title="Board and Batten">
                <p>Use our unedged boards (2nd-cut slabs) to create rustic Board-on-Board siding on pole or frame buildings. Great for 
                animal shelters, machine sheds, hay sheds, garden shed, playhouse, barns, wind fencing etc...</p>
                <img src="Images/headerThree.png" width="356" height="46" alt="Deal Direct with the Mill" title="Deal Direct">
                <p>this is where you write whatever</p>
            </div><!--this is the end of the left div-->
    </div> <!--this is the end of the content-->
    <div id="column">
        <img src="Images/shed01.jpg" alt="shed" title="shed">
        <img src="Images/batten01.jpg" alt="batten" title="batten">
        <img src="Images/shed02.jpg" alt="shed2" title="shed2">
    </div><!--this is the end of the column-->
    <div style="clear:both"></div>
</div><!--this is the end of the wrapper-->

.CSS

#wrapper{width: 1210px;
margin: 0 auto;
background-color:#F00;
}

#content{padding-bottom: 10px;
padding-left: 20px;
width: 940px;
float: left;
color: #ffffff;}/*960*/
#left{width: 600px;
padding-top: 20px;
padding-right: 15px;
padding-left: 15px;
float: left;
background-color: #838b73;}/*630*/
#column{width: 220px;
background-color: #838b73;
padding-top: 25px;
padding-left: 15px;
padding-right: 15px;
float:left;
margin: 0 auto;}/*250*/