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>

我已经尝试了许多不同的方法来使用网格、布局和显示控件来实现所需的结构，但没有任何效果。

先谢谢你的提示或解决方案。

Answer 1

这是一个非常基本的方法，通过设置它们为inline-block，并设置它们的最小宽度为px，所以当屏幕变小时，它们会被截断。 下面是jsfiddle的玩法。https:/jsfiddle.nettrw530q1

.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的值是任意的，因为是包括这个额外的单元格。)

希望对你有所帮助，敬礼。