Question

我有这个html结构。

<div id="parent">
    <div class="child">
        <h1>title</h1>
        <p>content</p>
    </div>
    <div class="child">
        <h1>title</h1>
        <p>content</p>
    </div>
    <div class="child">
        <h1>title</h1>
        <p>content</p>
    </div>
</div>

和这些元素的CSS。

#parent{
    padding: 0px 8px;
    overflow: auto;
    max-width: 100%;
    max-height: 100%;
}
.child{
    width: 300px;
    display: block;
}
.child:first-child{
    float: left;
}
.child:last-child{
    float: right;
}
.child:nth-child(2){
/* what is the style here to make it center? */
}

从上面的代码中可以看出，目标是使这些子元素以一种干净整洁的方式正确对齐，这样第一个子元素就会向左浮动，最后一个子元素向右浮动，第二个子元素应该是正好在那些左右子元素之间，所以我想要实现的是一个三个盒子，在父div中的一个相等的patern上对齐。到目前为止我试过保证金：0自动;在中间的子元素，但遗憾的是，目前我正在寻找一个精确的解决方案来实现我想要的输出。

Answer 1

只需漂浮它：

#parent{
    padding: 0px 8px;
    overflow: auto;
    max-height: 100%;
    float:left;
    width:900px;
}
.child{
    width: 300px;
    display: block;
    float:right;
}

这是fiddle

Answer 2

将您的第二个div浮动到左侧并根据需要应用剩余边距。如果您尝试创建响应式模板，只需使用％而不是像素。我希望这是有道理的。

.child:first-child, .child:nth-child(2) {
    float:left;
}

.child:nth-child(2) {
    /* what is the style here to make it center? */
    margin-left: what ever pixels or %;
}

.child:last-child {
    float:right;
}

JSFIDDLE（响应）：

http://jsfiddle.net/83Gg2/

Answer 3

你不需要将元素一个接一个地浮动到另一个，你需要的是在它们上使用display: inline-block property，这是一个hacky但更清洁的方法：

#parent{                                                                        
     width: 100%; 
     height: 100%;                                                  
     max-width: 100%;
     max-height: 100%;                                          
     overflow: hidden;                                                           
}                                                                                
.child{                                                                         
     width: 33%;  // Since there are 3 childs.                                                               
     display: inline-block;                                                       
}

这里的技巧和黑客是你需要在HTML代码中注释子元素之间的空格，因为属性display:inline-block只对齐它们之间没有空格的元素，所以你的html代码应该看起来像这样：

<div id="parent">                                                               
     <div class="child">                                                         
         <h1>title</h1>                                                          
         <p>content</p>                                                          
     </div><!--                                                                  
     --><div class="child">                                                      
         <h1>title</h1>                                                          
         <p>content</p>                                                                               
     </div><!--                                                                  
     --><div class="child">                                                      
         <h1>title</h1>                                                          
         <p>content</p>                                                          
     </div>                                                                      
 </div>                                                                          
 ~

这是JsFiddle Check it out

的链接

〜
〜

Answer 4

好的，既然你也标记了jquery，这里是JQ方式。

如果您不想将修复宽度设置为#parent，并且希望修复宽度为.child，请使用此选项。也适用于跨浏览器和旧浏览器。

DEMO http://jsfiddle.net/yeyene/VW9mw/

$(document).ready(function(){
    moveCenter();
    $(window).resize(function() {
        moveCenter();
    });
});
function moveCenter(){
    var mar = ($('#parent').width()-$('.child').width()*3)/2;    
    $('.child').eq(1).css({
        'margin-left': mar+'px',
        'margin-right':mar+'px'
    });
}

Answer 5

Flexbox使这个变得微不足道：

#parent {
  display: flex;
}
.child {
  flex: 1;
}

根据需要添加前缀和旧语法，符合http://caniuse.com/#search=flexbox

我为你举了一个例子：http://codepen.io/anon/pen/tribL

make center是父div width float子元素中的第二个子元素

5 个答案:

这是fiddle