Question

我无法将3个div对齐。我之前从未遇到过这个问题，但现在我正在制作一个模板，其中背景的网页每个元素的宽度都是100％（永不结束）。

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

非常感谢您的帮助！

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

    <!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>

Answer 1

你只需要向左漂浮一次。

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

div {
float:left;
}

您有3种不同的浮动导致您的问题：

删除所有这些：

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

或者给你想要生成相同类名的所有div，并将css添加到该元素：

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

和

.floaters {
float:left;
}

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

您还可以将float:left;添加到#infoContent3

Answer 2

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

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

和

.floaters {
float:left;
}

Answer 3

在overflow:hidden;

中添加#infoContent3

输出 -

overflow

3个div彼此相邻

3 个答案: