佈局問題：中心的兩個固定列

如果標籤＃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

佈局問題：中心的兩個固定列

回答

相關問題