3个div并排答案

【问题标题】：3 divs next to each other3个div并排
【发布时间】：2013-06-26 04:21:56
【问题描述】：

我无法将 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>

【问题讨论】：

小提琴 FTW：jsfiddle.net/NvbnY
这不是你的问题的答案，但它可能被视为一个提示：你是否尝试过使用 CSS 框架，例如 [tag: zurb-foundation]？

标签： css html

【解决方案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

【讨论】：

【解决方案2】：

给你想要影响的所有 div 赋予相同的类名并将 css 添加到该元素：

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

和

.floaters {
float:left;
}

【讨论】：

-1，因为我建议不要使用表格，因为这纯粹是一种布局，而不是表格数据......所以如果你编辑，我会收回投票:)
@Mr.Alien 我理解了这个问题。需要投票。
完成，删除了反对票和赞成票，还请确保您建议清除浮动

【解决方案3】：

在#infoContent3中添加overflow:hidden;

输出 --

【讨论】：