如何在 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

如何在 W3.CSS 中将两张牌并排放置

How to place two cards next to each other in W3.CSS

html

css

w3-css