响应式CSS表格布局使一个单元格像行一样(Responsive CSS table layout make one cell act like a row)

响应式CSS表格布局使一个单元格像行一样(Responsive CSS table layout make one cell act like a row)

我有一个我试图通过display:table-cell实现的布局设计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，所以使用它的网格很容易，只要我可以使它们具有相同的高度。

注意：虚假列不适用于我的场景，因为背景不适当地着色/间隔。

I have a layout design I was trying to accomplish via display:table-cell. This however may not be the best option, as it is causing me problems.

The desired outcome:

I wish that on smaller screens (less than 992px) to have a layout like so:

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

But then on larger screens (greater than 992px) to have this layout:

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

The caveat is that they may not all have the same size content, and I want them to stretch vertically to all be the same height.

I am currently accomplishing this with :

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

My problem arises from the fact that in order to get the third cell to wrap around, I need to give it it's own row. But then, the cell will only spread to fit the first 50% (under the first cell) and not stretch 100%. This can be fixed by making the second row it's own table, but then, getting the two tables side-by-side at the right screen size is proving difficult as well.

If there is a better way to make the divs match height that would be ideal. I am using bootstrap, so using its grids would be easy, so long as I can make them all the same height.

Note: Faux columns do not work for my scenario as the backgrounds would not be appropriately colored/spaced.

最满意答案

您可以简单地使用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> 
  
 
You could simply use table-layout:fixed to ensure the cells to get equal width.
 
For the @media query part, use display:table-caption for the last cell, and set caption-side:bottom to specify the placement.
 
JSFiddle: http://jsfiddle.net/7kpcf46r/ (resize the output frame and see)
 
 
 
  
  
.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>