Как разместить две карты рядом друг с другом в W3.CSS - PullRequest
Новая
       31

Как разместить две карты рядом друг с другом в W3.CSS

0 голосов
/ 21 июня 2019

Я хочу разместить две карты рядом друг с другом (по горизонтали) Но в настоящее время они выровнены по вертикали.

То есть я хочу разместить карту Заголовок 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>

1 Ответ

0 голосов
/ 21 июня 2019

Измени свой 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

...