W3 CSS : 排中心卡

Question

我在 W3.CSS 框架内工作，并尝试将两张卡片居中，如下图所示。

当视口为大尺寸或中尺寸时，我希望卡片彼此相邻。在小视口上，我希望他们将一个堆叠在另一个之上。无论如何，尽我所能，我就是无法实现这种布局。我要么能够让卡片彼此相邻，但它们不会在行内居中，要么我让它们居中，但无论视口的大小如何，它们都会堆叠在一起。

这里是一些示例代码作为起点。

 <div class="w3-row w3-padding w3-border w3-gray" style="margin:auto">
    <div class="w3-card" style="width:35%;">
        <p>w3-card</p>
    </div>

    <div class="w3-card" style="width:35%;">
        <p>w3-card</p>
    </div>
</div>

我尝试了很多不同的方法来使用 Grid、Layout 和 Display 控件实现所需的结构，但没有任何效果。

在此先感谢您提供提示或解决方案。

Answer 1

这是一个非常基本的方法，将它们设置为内联块，并将它们设置为具有以像素为单位的最小宽度，这样当屏幕变小时它们就会被截断。这是要玩的 jsfiddle：https://jsfiddle.net/trw530q1/

.w3-card {
  display: inline-block;
  background-color: blue;
  min-width: 200px;
}

.w3-gray {
  text-align: center;
}

<div class="w3-row w3-padding w3-border w3-gray" style="margin:auto">
    <div class="w3-card" style="width:35%;">
        <p>w3-card</p>
    </div>

    <div class="w3-card" style="width:35%;">
        <p>w3-card</p>
    </div>
</div>

Answer 2

试试这个：

<div class="w3-padding-large w3-border w3-gray">
<div class="w3-cell-row w3-content" style="width:70.5%">
    <div class="w3-cell w3-mobile w3-container w3-card w3-blue">
        <p>w3-card</p>
    </div>
    <div class="w3-cell w3-mobile" style="padding:0.1em"></div>
    <div class="w3-cell w3-mobile w3-container w3-card w3-blue">
        <p>w3-card</p>
    </div>
</div>    
</div>

（注意：中间的单元格只是为了“美观”。70.5 的值是任意的，因为包括了这个额外的单元格。）

W3 CSS : 排中心卡

W3 CSS : Center Cards within Row

html

css

row

center

w3.css