使第二个子元素居中于父div宽度float子元素内

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内等距排列的三个框。 到目前为止，我尝试了margin：0 auto; 在中间子元素上，但不幸的是无法正常工作，因此目前我正在寻找一种精确的解决方案以实现所需的输出。

Answer 1

只要浮动它：

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

这是一个小提琴

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在它们上，这是一种骇人但更干净的方法：

#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 检查出来

〜
〜

Answer 4

好的，因为您也标记了jquery，所以这是JQ方式。

如果您不想将固定宽度设置为#parent并且想要将固定宽度设置为.child ，请使用此选项。 也可以在跨浏览器和旧浏览器中使用。

演示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