響應式CSS表格佈局使一個單元格像一排行爲

Question

我有一個佈局設計，我試圖通過display:table-cell完成。然而，這可能不是最好的選擇，因爲它會導致我的問題。

期望的結果：

我希望在小屏幕上（小於992px）有一個佈局，像這樣：

+----+----+ 
| | | 
+----+----+ 
|   | 
+---------+ 

但隨後在更大的屏幕（超過992px以上）有這佈局：

+--+--+--+ 
| | | | 
+--+--+--+ 

需要說明的是，他們可能不是所有具有相同大小的內容，我希望他們垂直所有伸展相同的高度。

目前與我實現這個：

.table { 
    width:100%; 
    display:table; 
}  

.cell { 
    display:table-cell; 
    width:50%; 
    position:relative; 
    padding:0px 10px; 
    border:1px solid #000; 
} 

我的問題的事實，爲了獲得第三小區環繞，我需要給它自己的行出現。但是，細胞只會擴散到第一個50％（在第一個細胞之下）而不能擴展到100％。這可以通過將第二行設置爲自己的表格來解決，但是，以合適的屏幕尺寸並排顯示兩張表格也很困難。

如果有更好的方法來使div匹配高度，將是理想的。我使用bootstrap，所以使用它的網格將很容易，只要我可以使它們都處於同一高度。

注意：虛擬列不適用於我的方案，因爲背景不適合着色/間隔。

Answer 1

你可以簡單地使用table-layout:fixed，以確保細胞獲得平等的寬度。

對於@media查詢部分，使用display:table-caption作爲最後一個單元格，並設置caption-side:bottom來指定佈局。

的jsfiddle：http://jsfiddle.net/7kpcf46r/（調整輸出幀，看看）

.table { 
 
    display: table; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    border: 1px solid red; 
 
} 
 
@media (max-width: 768px) { 
 
    .cell:last-child { 
 
     display: table-caption; 
 
     caption-side: bottom; 
 
    } 
 
}

<div class="table"> 
 
    <div class="cell">One Line</div> 
 
    <div class="cell">Two<br/>Lines</div> 
 
    <div class="cell">More<br/>Than two<br/>Lines</div> 
 
</div>

Answer 2

你可以使用媒體查詢基於屏幕的寬度，例如給出的HTML風格內容：

<div class="cell"></div> 
<div class="cell"></div> 
<div class="cell"></div> 

的CSS：

/* Setting the defaults, to apply regardless of 
    screen width: */ 
html, body { 
    /* removing margin and padding, setting 
     font-size to 0 in order to prevent 
     new-lines creating space between sibling 
     elements: */ 
    margin: 0; 
    padding: 0; 
    font-size: 0; 
} 

/* resetting the font-size for all descendants of 
    the body element: */ 
body * { 
    font-size: 16px; 
} 

div.cell { 
    /* border-box, causes the browser to include 
     the width of the borders and padding within 
     the assigned width of the element: */ 
    box-sizing: border-box; 
    /* instead of table-cell, causing elements 
     to default to displaying side-by-side: */ 
    display: inline-block; 
    /* the default behaviour is to show at 
     50% of the width of the parent (body) 
     element: */ 
    width: 50%; 
    margin: 0; 
    padding: 0; 
    height: 40vh; 
    border: 2px solid #000; 
} 

/* 
    Note: in this demo I'm using screen widths of 
     of 600px (min/max) to demonstrate the 
    principles within the constraints of JS Fiddle's 
    limited viewport. In your project, obviously, use 
    your required width of 992px. 
*/ 

/* in screen-widths less than 600px 
    the last-child has a width of 100%: */ 
@media all and (max-width: 600px) { 
    div.cell:last-child { 
     width: 100%; 
    } 
} 

/* in screen-widths greater than 600px 
    div.cell elements have a width of 33% 
    (including the last-child) to display 
    side-by-side across the viewport: */ 
@media all and (min-width: 600px) { 
    div.cell { 
     width: 33%; 
    } 
} 

JS Fiddle demo。

參考文獻：

• CSS Media Queries。

Answer 3

你可以這樣說： http://jsfiddle.net/z1kwrm8p/2/

HTML：

<div class="table"> 
    <div class="cell" id="c1">ABCD</div><!-- 
--><div class="cell" id="c2">EFGH</div><!-- 
--><div class="cell" id="c3">XYZ PQRS ABCD EFGH IJKL MNOP QRSTUVWXYZ</div> 
</div> 

CSS：

.table { 
    width:100%; 
    display:block; 
    background:#009933; 
}  

.cell { 
    display:inline-block; 
    width:50%; 
} 


#c1 { 
    background:#99ccff; 
} 

#c2 { 
    background:#ff9966; 
} 

#c3 { 
    width:100%; 
    background:#66FF66; 
} 

@media only screen and (max-width: 991px) { 
    /* rules that only apply for canvases narrower than 992px */ 
    .table { 
     display:table; 
    } 

    .cell { 
     display:table-cell; 
     width:33.3%; 
    }  

    #c3 { 
     width:33.3%; 
    } 
}