居中的div，最大寬度和兩側內容

Question

假設我有一個包含3列的布局：

| left sidebar |       content        | right sidebar |

每列都是一個帶有float：left的div。

我想讓內容div始終居中，但還要為其設置一個最大寬度 ：

| left sidebar | centered + max width | right sidebar |

3列的總寬度應始終為100％，因此兩個側邊欄將適應並填充剩余空間。

因此，在一個非常大的屏幕上，它看起來像這樣：

|        left sidebar        |       content        |        right sidebar        |

好像內容div的邊距是： 0自動 （但兩個div在側面而不是空白）。

CSS可以做這樣的事情嗎？

Answer 1

使用flexbox非常簡單

 *{margin:0; box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;} div{ border: 1px solid #000;} /* here you go */ .flex{ display: flex; } .grow-1{ flex: 1; }

 <div class="flex"> <div>left sidebar</div> <div class="grow-1">content</div> <div>right sidebar</div> </div>

將類grow-1添加到其他元素：

 *{margin:0; box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;} div{ border: 1px solid #000;} /* here you go */ .flex{ display: flex; } .grow-1{ flex: 1; }

 <div class="flex"> <div class="grow-1">left sidebar</div> <div class="grow-1">content</div> <div class="grow-1">right sidebar</div> </div>

Answer 2

自float: left以來，情況已經發生了變化float: left是唯一的解決方案。

一個更簡單的替代方法是使用display屬性。 一個例子是這樣的：

div#wrapper {
    display: table;
    width: 100%;
    table-layout: fixed;
}
div#left-sidebar,
div#content,
div#right-sidebar {
    display: table-cell;
}

table-cell屬性允許div像table-cell一樣工作， 而無需實際使用表 -兼具兩個優點。

wrapper div中的屬性允許您指定寬度並影響像元的分布方式。

更好的解決方案是使用flex-box 。 但是，這僅在現代瀏覽器中有效，因此您可能必須推遲直到可以確定沒有IE潛伏。 學習起來也比較困難，但是更加靈活。

Answer 3

如果由於某些較舊的瀏覽器不支持使用flex-box ，請不要使用它。

您可以在css使用display表屬性。 然后，可以使用@media查詢來有效地設置content div的max-width （即中間列） 。

媒體查詢示例：

@media (min-width: 300px) {
    .middle {
        width: 100px !important;
    }
}

關於媒體查詢的注意事項： .middle類的width值應等於@media查詢的min-width值除以三。 然后，此上下文中的width值的行為類似於max-width 。

例如; 如果希望中間列的max-width為300px ，則將@media查詢的min-width值設置為900px 。 在這種配置下，中間列的寬度將保持靈活，直到瀏覽器寬度超過900px為止，此時中間列的寬度固定為300px 。

程式碼片段：

這是完整的代碼段，包括html和css ：

 body, html { padding: 0; margin: 0; } .wrapper { width: 100%; height: 100px; display: table; background: #BADA55; table-layout: fixed; } .wrapper > div { display: table-cell; width: 100%; text-align: center; vertical-align: middle; } .middle { background: #C0FFEE; } @media (min-width: 750px) { /* * The 'width' value below should be the @media * queries 'min-width' value (above) divided by three. * * The 'width' value below is then behaves similar * to 'max-width'. */ .middle { width: 250px !important; } }

 <body> <div class="wrapper"> <div>left sidebar</div> <div class="middle">content</div> <div>right sidebar</div> </div> </body>

居中的div，最大寬度和兩側內容

問題描述

3 個解決方案

解決方案1
1 2017-04-04 12:45:04

解決方案2
0 2017-04-04 12:50:16

解決方案3
0 2017-04-04 14:44:58

居中的div，最大寬度和兩側內容

問題描述

3 個解決方案

解決方案1 1 2017-04-04 12:45:04

解決方案2 0 2017-04-04 12:50:16

解決方案3 0 2017-04-04 14:44:58

解決方案1
1 2017-04-04 12:45:04

解決方案2
0 2017-04-04 12:50:16

解決方案3
0 2017-04-04 14:44:58