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中将两张卡彼此相邻放置

1 个答案: