响应式 CSS table 布局使一个单元格像一行一样

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%。这可以通过使第二行成为它自己的 table 来解决，但是事实证明，在正确的屏幕尺寸下并排显示两个 table 也很困难。

如果有更好的方法使 div 匹配高度，那将是理想的。我用的是bootstrap，所以使用它的网格很容易，只要我能让它们的高度都一样。

注意：人造列不适用于我的场景，因为背景不合适 colored/spaced。

Answer 1

您可以使用媒体查询根据屏幕宽度设置内容样式，例如，给定 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 2

你可以这样做： 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%;
    }
}

Answer 3

您可以简单地使用 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>

响应式 CSS table 布局使一个单元格像一行一样

Responsive CSS table layout make one cell act like a row

html

css

responsive-design