布局问题：中心的两个固定列

如果标签＃1和标签＃4分别左右浮动，如何将标签＃2和标签＃3放置在panel格的中央。布局问题：中心的两个固定列

当浏览器的宽度达到一定高度时，我还想在标签＃1和标签＃4下面移动标签＃2和标签＃3。所以标签＃1和标签＃4应该在一起，正如它们下面的标签＃2和标签＃3一样。

html, body { 
 
    font-family:'Helvetica Neue', Arial, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: 500; 
 
} 
 
#panel { 
 
    width: 100%; 
 
    background: #ddd; 
 
    display: block; 
 
    height: auto; 
 
    float: left; 
 
} 
 
.box-1, .box-2, .box-3, .box-4 { 
 
    border: 2px solid #aaa; 
 
    background: #fff; 
 
    padding: 1em; 
 
    width: auto; 
 
    float: left; 
 
    border-radius: 2px; 
 
    display: inline-block; 
 
} 
 
.center-box { 
 
    margin: 0 auto; 
 
    float :left; 
 
    border: 1px solid blue; 
 
    text-align: center; 
 
} 
 
.box-4 { 
 
    float: right; 
 
} 
 
@media screen and (max-width: 568px) { 
 
    .box-1, .box-4 { 
 
    width: 50%; 
 
    float: left; 
 
    } 
 
    .center-box { 
 
    margin: 0 auto; 
 
    } 
 
}

<div id="panel"> 
 
    <span class="box-1">Label #1</span> 
 
    <div class="center-box"> 
 
     <span class="box-2">Label #2</span> 
 
     <span class="box-3">Label #3</span> 
 
    </div> 
 
    <span class="box-4">Label #4</span> 
 
</div>

来源

2015-03-02 mapr

是否有可能重新排序的标记内的元素？ – 2015-03-02 23:54:56

@HashemQolami是的，我正在尝试。 – mapr 2015-03-03 00:02:09

@kolor如果你可以绘制2张图片1.normal和2.narrow来描述你需要它会是非常有用的。 – Stickers 2015-03-03 00:03:56

假设改变HTML元素的顺序是允许的，该布局可通过float荷兰国际集团可以实现.box-1/.box-4到left/right并将其他框显示为内联元素。

然后，为了将它们排列在面板的中心，我们可以将text-align: center添加到.center-box元素。

另请注意，在内联流程中，有一个whitespace between inline-level elements。删除间隙的一个选项是将父项的font-size设置为0，然后将其重新设置为子项的默认值。

*, *:before, *:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    font: 500 14px 'Helvetica Neue', Arial, sans-serif; 
 
} 
 
#panel { 
 
    background: #ddd; 
 
} 
 
#panel:after, 
 
#panel:before { 
 
    content: ""; 
 
    display: table; 
 
} 
 
.box-1, .box-2, .box-3, .box-4 { 
 
    border: 2px solid #aaa; 
 
    background: #fff; 
 
    padding: 1em; 
 
    border-radius: 2px; 
 
} 
 
.box-1 { 
 
    float: left; 
 
} 
 
.box-4 { 
 
    float: right; 
 
} 
 
.box-2, .box-3 { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    font-size: 14px; 
 
} 
 
.center-box { 
 
    border: 1px solid blue; 
 
    text-align: center; 
 
    font-size: 0; 
 
} 
 

 
@media screen and (max-width: 568px) { 
 
    [class^="box-"] { 
 
     width: 50%; 
 
    } 
 
}

<div id="panel"> 
 
    <span class="box-1">Label #1</span> 
 
    <span class="box-4">Label #4</span> 
 
    <div class="center-box"> 
 
     <span class="box-2">Label #2</span> 
 
     <span class="box-3">Label #3</span> 
 
    </div> 
 
</div>

来源

2015-03-03 00:06:54

这是一个很好的解释。感谢您的帮助。 – mapr 2015-03-03 22:37:51

布局问题：中心的两个固定列

回答

相关问题