如何将此 div 列浮动到右侧？答案

【问题标题】：How do I float this div column to the right?如何将此 div 列浮动到右侧？
【发布时间】：2013-11-26 22:21:32
【问题描述】：

我是一名一年级的网页设计师，我目前正在从事一项需要并排浮动两个内容的任务。每次我将右侧内容浮动到右侧时，我：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;}

目前这让我非常沮丧，我不知道该怎么办

【问题讨论】：

由于嵌套，很难说出您希望最终设计的样子。两柱液？你想要什么与什么相邻，在哪一边？
另外，最好提供fiddle，以便人们可以更改您的代码并提供建议和演示。
听起来您需要一些height 分配和positioning，甚至可能需要一些display 修改。

标签： css html floating clearfix

【解决方案1】：

您需要为“#wrapper”提供适当的大小以包含“#content”和“#column”，这样您就不会再看到这个特定问题了。

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

但是你会发现另一个问题，如果你为你的 '#wrapper' 声明了一个背景，你将看不到它，因为 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*/

【解决方案2】：

不确定您是否想要 column div 到 float 到主 div 的左侧，或者想要在您的 left 旁边添加一个 right div。

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

这个想法是包装器的宽度应该足够大（宽）以并排容纳所有divs。如果不是，浮动的 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; 
}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

将您的 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/

您知道，您希望两列的总宽度（对象宽度 + 内边距 + 边距 + 边框）小于容器的宽度。

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

【讨论】：

哦，另一方面，您没有正确关闭 img 标签。你有<img src="#" alt="text" title="text">。你应该有<img src="#" alt="text" title="text" /> 强调/>

【解决方案5】：

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

至于包装器，您似乎想要添加一个height 赋值；否则wrapper 就是960px x 0px

【讨论】：

【解决方案6】：

将 float:left 添加到您的包装类

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

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

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

【讨论】：