Question

我有一个我试图通过class Product { protected $hidden = ['id', 'translations']; protected $appends = ['name', 'description']; public function getNameAttribute() { return $this->translations->name; } public function getDescriptionAttribute() { return $this->translations->description; } }完成的布局设计。然而，这可能不是最好的选择，因为它会给我带来麻烦。

期望的结果：

我希望在较小的屏幕（小于992像素）上有这样的布局：

display:table-cell

然后在大屏幕（大于992px）上进行此布局：

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

需要注意的是，它们可能并非都具有相同的尺寸内容，我希望它们垂直拉伸到所有相同的高度。

我目前正在通过以下方式实现这一目标：

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

我的问题源于这样一个事实：为了让第三个细胞环绕，我需要给它自己的行。但是，细胞只会扩散到前50％（在第一个细胞下）并且不能伸展100％。这可以通过将第二行设置为自己的表来修复，但是，然后将两个表并排放在正确的屏幕尺寸上也很困难。

如果有更好的方法使div匹配高度是理想的。我正在使用bootstrap，所以使用它的网格很容易，只要我可以使它们具有相同的高度。

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

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%;
    }
}

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

2 个答案: