0

我有这个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; 在中间子元素上，但不幸的是不起作用，所以目前我正在寻找一个精确的解决方案来实现我想要的输出。

4

5 回答 5

0

好的，因为你也标记了 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'
    });
}
于 2013-07-04T02:19:36.693 回答
0

只是浮动它：

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

这是一个小提琴

于 2013-07-04T00:52:44.540 回答
0

Flexbox 使这变得微不足道：

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

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

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

于 2013-07-04T07:40:06.033 回答
0

将第二个 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/

于 2013-07-04T01:34:43.657 回答
0

您不需要将元素彼此浮动，您需要的是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 的链接检查一下

~~
_

于 2013-07-04T01:35:57.290 回答