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/

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

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，或者想要right div旁边的left div {1}}。

我在这里添加了两个：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

您将#content与940px向左浮动，＃column与220px向右浮动。 #wrap有960px所以#content和#column都不适合#wrap。因此，如果您的建议是使用#column浮动#content，那么您必须减小宽度。如果您的建议是使用#column浮动#left，则必须将#left和#column放在#content

中

Answer 6

你需要给'#wrapper'适当的大小以包含'#content'和'#column'，这样你就不会再看到这个特定的问题了。

例如：总''内容'宽度（“宽度”640+“填充”20）+总'#column'宽度（“”宽度“220+”填充“15 + 15）=适当的'#wrapper'宽度 960 + 250 = 1210px 然后你会得到你想要的东西。

然而，你会发现另一个问题，如果你声明了'#wrapper'的背景，你将看不到它，因为包装器将无法定义浮动元素的大小。要解决这个问题，请添加下一个'＆lt; div style =“clear：both;”＆gt;＆lt; / div＆gt;'在你的结束包装之前。

此外，“我认为”如果您将'#column'的浮动设置为left而不是right，您将获得相同的效果，并且您将更容易理解正在发生的事情。

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

祝你好运！

在-ACTION：

<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*/

如何将此div列向右浮动？

6 个答案: