W3 CSS:行内的中心卡

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

enter image description here

当视口是大号或中号时,我希望这些卡片彼此相邻放置。在小视口上,我希望它们将一个堆叠在另一个之上。无论如何,请尝试,但我无法实现此布局。我可以使这些卡彼此相邻放置,但是它们不会在行内居中,或者可以使它们居中,但是不管视口的大小如何,它们都可以堆叠在一起。

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

 <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控件来实现所需的结构,但是NOTHING仍然有效。

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

评论
  • bjstry
    bjstry 回复

    Here's a pretty basic way of doing it by setting them to inline-block and also setting them to have a min-width in px so they will truncate down when the screen gets small. Here's the jsfiddle to play with: 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>