css怎样实现三个div并排,中心将三个div与CSS并排排列

好的，在下面的评论之后，我更好地了解你在寻找什么，而容器div需要208px的警告。我不认为margin：auto会在这里将所有三个中心放在一个组中，所以我建议使用float：left并使用jQuery计算#content div，减去.container widths，然后除以2得到左边距-most .container div。

.container {

width:208px;

float:left;

padding:0;

margin: 0 auto;

text-align:center;

background-color: #cccccc;

}

.container p {

text-align:justify;

padding: 20px 10px 20px 10px;

}

$(document).ready(function(){

var w = $('#content').width();

var calw = (parseInt(w) - (208*3))/2;

$('#left').css('margin-left',calw+'px');

});

COLLECTIONS

blahblah

COLLECTIONS

blahblah

COLLECTIONS

blahblah

修改强>

考虑到固定宽度的208px div容器，我认为最简单的方法是使用一点jQuery：

$(document).ready(function(){

var w = $('#content').width();

var calw = (parseInt(w) - (208*3))/2;

$('#left').css('margin-left',calw+'px');

});

这是一个jsfiddle来演示效果(用上面的内容更新)。

当然，在这一点上，你可能最好使用一个自动应用了margin的容器div，以及你拥有的3个contianer div的宽度。当然，这种方法会导致IE due to a bug中的问题：margin：auto被处理。

.container2 {

width:208px;

float:left;

padding:0;

margin: 0 auto;

text-align:center;

background-color: #cccccc;

}

.container2 p {

text-align:justify;

padding: 20px 10px 20px 10px;

}

#content2 {

width: 624px;

background-color: #ccccaa;

margin: 0 auto;

}

COLLECTIONS

blahblah

COLLECTIONS

blahblah

COLLECTIONS

blahblah