0

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

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

4

6 回答 6

1

不知道你是想column div在floatmain 的左边div，还是想right在你的left.

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

这个想法是包装器的宽度应该足够大（宽）以div并排容纳所有 s 。如果不是，浮动的 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; 
}
于 2013-11-14T03:13:52.613 回答
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;}
于 2013-11-14T03:09:23.407 回答
1

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

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

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

于 2013-11-14T03:11:18.830 回答
0

You need to give '#wrapper' the appropriate size to contain '#content' and '#column', that way you won’t see this particular issue anymore.

For example: Total '#content' width (“width”640+”Padding”20) + Total '#column' width (“”width”220+”Padding”15+15) = appropriate '#wrapper' width 960+250 = 1210px Then you will get what you want.

Yet you will find another issue, if you declared a background to your '#wrapper' you won’t see it because wrapper won’t be able to define the floated elements size. To fix that add the next '< div style=”clear:both;” >< /div >' before your closing wrapper.

In addition, “I think” if you set the float of '#column' to left instead of right, you will get the same effect and it will be easier for you to understand what’s going on.

Hopefully it clarified the Issue; else I’m happy to provide more explanation.

Good luck!

IN-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*/
于 2013-11-14T03:17:52.613 回答
0

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

于 2013-11-14T03:11:59.960 回答
0

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

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

于 2013-11-14T03:10:00.293 回答