3个div彼此相邻

I am having trouble aligning 3 divs next to each other. I have never had this this issue before, but now I am making a template where the background has a 100% width (never ends) for each element of the webpage.

我无法将3个div对齐。我之前从未遇到过这个问题,但现在我正在制作一个模板,其背景对于网页的每个元素都有100%的宽度(永不结束)。

The element I want to align 3 divs horizontally is not working for me. I can get two divs next to each other, but when I try to align the 3rd div, the 3rd div will align, but the entire element gets messed up somehow.

我希望水平对齐3个div的元素对我不起作用。我可以让两个div彼此相邻,但是当我尝试对齐第3个div时,第3个div会对齐,但整个元素会以某种方式混乱。

Your help is greatly appreciated!

非常感谢您的帮助!

Here is the full code. I took out other website elements to simplify the code:

这是完整的代码。我拿出其他网站元素来简化代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Website</title>

<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

strong {
    font-weight:bold;color:#0289ce;
}

em {
    font-style:oblique;
}

p {
    margin:15px 0;
}

.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}

h1 {font-size:180%;}
h2 {font-size:150%;}
h3 {font-size:125%;}
h4 {font-size:100%;}
h5 {font-size:90%;}
h6 {font-size:80%;}

a:link {color:#0289ce;}
a:hover {color:#f64274;}

/*End RESET - Begin Full Width CSS*/
    body {
        background:#FFFFBF;
        color:#2D1F16;
        font:13px Helvetica,  Arial,  sans-serif
    }

    .wrap {
    position:relative;
    margin:0 auto;
    width:900px;
    background-color: #EC3515;
    }
.wrapHeader {
    position:relative;
    margin:0 auto;
    width:900px;
    background-color: #9FF;
}

.wrapSlider {
    position:relative;
    width:900px;
    margin-right: auto;
    margin-left: auto;
    top: 67px;
    right: 32px;
}
.wrapPackages {
    position:relative;
    width:900px;
    margin-right: auto;
    margin-left: auto;
}
.multipleDivs {
    height: auto;
    width: 100%;
    background-color: #CFF;
    clear: both;
    position: relative;
}
.wrapInfo {
    position:relative;
    width:900px;
    margin-right: auto;
    margin-left: auto;
    background-color: #A6FFFF;
    height: auto;
    clear: both;
}
#infoContent1 {
    background-color: #666;
    height: auto;
    width: 300px;
    float: left;
    position: relative;
}
#infoContent2 {
    background-color: #999;
    height: auto;
    width: 300px;
    float: left;
    position: relative;
}
#infoContent3 {
    background-color: #CCC;
    height: auto;
    width: 300px;
}


.wrapContent {
    position:relative;
    width:100%;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    }




    #header, #footer {
        width:100%;
        float:left;
        padding:15px 0;
    }

    #header {
    background-color: #FFF;
    }

    #header .logo {
    float:left;
    width:400px;
    }

    #header p {
        float:right;
        width:400px;
        margin:0;
    }

    #content {
    padding:15px 0;
    clear:both;
    background-color: #F9C;
    }


 .imageSlider {
    height: 570px;
    width: 100%;
    color: #FFF;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/bgSlider2.jpg);
}
.package {
    height: auto;
    width: 100%;
    background-color: #CCC;
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}





    #footer {
    background:#EC3515;
    text-align:center;
    }

    #footer a {
        color:#fff;
    }
</style>

</head>

<body>

<div id="header">
    <div class="wrapHeader">
        <div class="logo">
            <a href="#"><img src="images/#.png" width="250" height="62" /></a>
         </div>
      <p>Sample text</p>
    </div>

</div>

<div class="wrapContent">
    <div id="content">



<div class="multipleDivs">
    <div class="wrapInfo">  
           <div id="infoContent1">
           <p>Div 1</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>    

<div id="infoContent2">
           <p>Div 2</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <div id="infoContent3">
           <p>Div 3</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>    

    </div>
</div>    






<div class="package">  
    <div class="wrapPackages">
      <img src="images/sampleImage.jpg" width="900" height="475" border="0" /></div>
</div>

    <p>&nbsp;</p>
    <p>&nbsp;</p>   

    </div>
</div>

<div id="footer">
<div class="wrap">
            <p>&copy; 2013 - <a href="http://fillertext.com">Sample Text</a></p>
    </div>
</div>

</body>
</html>

3 个解决方案

#1

Add overflow:hidden; in #infoContent3

添加溢出:隐藏;在#infoContent3中

Output --

3个div彼此相邻

#2

You need float left only once.

你只需要向左漂浮一次。

http://jsfiddle.net/NvbnY/2/

div {
float:left;
}

You had 3 different floats that are causing your issue:

您有3个不同的浮动导致您的问题:

Remove all of this:

删除所有这些:

.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
 }
.alignleft {
float: left;
}
.alignright {
float: right;
}

Alternately give all of the divs you want to be effected the same class name and add the css to that element:

或者,为所有要生效的div提供相同的类名,并将css添加到该元素:

<div class="floaters">1</div>
<div class="floaters">2</div>
<div class="floaters">3</div>

and

.floaters {
float:left;
}

In action - http://jsbin.com/iqegob/1/edit

在行动 - http://jsbin.com/iqegob/1/edit

You could also add float:left; to #infoContent3

你也可以添加float:left;到#infoContent3

#3

give all of the divs you want to be effected the same class name and add the css to that element:

给你想要生成相同类名的所有div,并将css添加到该元素:

 <div class="floaters">1</div> <div class="floaters">2</div> <div
 class="floaters">3</div>

and

.floaters {
float:left;
}

#1

Add overflow:hidden; in #infoContent3

添加溢出:隐藏;在#infoContent3中

Output --

3个div彼此相邻

#2

You need float left only once.

你只需要向左漂浮一次。

http://jsfiddle.net/NvbnY/2/

div {
float:left;
}

You had 3 different floats that are causing your issue:

您有3个不同的浮动导致您的问题:

Remove all of this:

删除所有这些:

.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
 }
.alignleft {
float: left;
}
.alignright {
float: right;
}

Alternately give all of the divs you want to be effected the same class name and add the css to that element:

或者,为所有要生效的div提供相同的类名,并将css添加到该元素:

<div class="floaters">1</div>
<div class="floaters">2</div>
<div class="floaters">3</div>

and

.floaters {
float:left;
}

In action - http://jsbin.com/iqegob/1/edit

在行动 - http://jsbin.com/iqegob/1/edit

You could also add float:left; to #infoContent3

你也可以添加float:left;到#infoContent3

#3

give all of the divs you want to be effected the same class name and add the css to that element:

给你想要生成相同类名的所有div,并将css添加到该元素:

 <div class="floaters">1</div> <div class="floaters">2</div> <div
 class="floaters">3</div>

and

.floaters {
float:left;
}

秒客网

3个div彼此相邻

3 个解决方案

#1

#2

#3

#1

#2

#3

相关文章