html - 如何在 W3.CSS 中将两张卡片并排放置

Question

我想将两张卡片并排放置(水平) 但目前它们是垂直对齐的。

也就是说，我想将标题 1 卡片放在标题 2 卡片旁边 即使我使用了一些边距，它也只在同一个地方水平移动而不是垂直移动

<div class="w3-container">
            <div class="w3-card-4" style="width:25%; margin-left:30px; margin-top: 20px">
              <header class="w3-container w3-black">
                <h1>**Heading 1<**/h1>
              </header>

            <div class="w3-container">
                <p>some text</p>
            </div>

            <footer class="w3-container w3-black">
                    <div class="w3-container">
                            <p><button class="w3-button w3-grey w3-round-large">a button</button></p>
                    </div>
            </footer>
            </div>
</div>

<div class="w3-container">

                <div class="w3-card-4" style="width:25%; margin-left:35%;">
                  <header class="w3-container w3-black">
                    <h1>**Heading 2**</h1>
                  </header>

                <div class="w3-container">
                    <p>Some text</p>
                </div>

                <footer class="w3-container w3-black">
                        <div class="w3-container">
                                <p><button class="w3-button w3-grey w3-round-large">a button</button></p>
                        </div>
                </footer>
                </div>
</div>

Answer 1

像这样改变你的 HTML

<div class="w3-row-padding">
    <div class="w3-half">
        <header class="w3-container w3-black">
            <h1>**Heading 2**</h1>
        </header>

        <div class="w3-container">
            <p>Some text</p>
        </div>

        <footer class="w3-container w3-black">
            <div class="w3-container">
                <p><button class="w3-button w3-grey w3-round-large">a button</button></p>
            </div>
        </footer>
    </div>
    <div class="w3-half">
        <header class="w3-container w3-black">
            <h1>**Heading 1**</h1>
        </header>

        <div class="w3-container">
            <p>some text</p>
        </div>

        <footer class="w3-container w3-black">
            <div class="w3-container">
                <p><button class="w3-button w3-grey w3-round-large">a button</button></p>
            </div>
        </footer>
    </div>
</div>

https://www.w3schools.com/code/tryit.asp?filename=G504CWBW4EBX