Как я могу исправить, что мои div совпадают?

Question

Я знаю, что этот вопрос задавался много, но решения для других постов у меня не работают. На моей первой странице есть раздел, который работает как раздел вкладок, с 4 кнопками в нижней части этого раздела, которые при нажатии будут загружать различное содержимое в этот раздел. Это все работает нормально, но когда я изменяю размер моего браузера, строка с моими кнопками перекрывается с содержимым над этим в этом разделе. Добавление блока отображения не решает проблему. Кто-нибудь знает, как я могу это исправить?

Вот код HTML и CSS:

<div class="container2">

  <div id="hp_slider_1" class="tabcontent">

    <div class="left">
      <div class="tabheading">
        <p>Heading</p>
      </div>

      <div class="slidertab">
        <?php echo do_shortcode('[smartslider3 slider=14]');?>
      </div>


    </div>


    <div class="right">
      <div class="tabheading">
        <p>Heading</p>
      </div>

      <div class="texttab">
        <h4 class="rightheading">Content1</h4>
        <p class="righttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <a href="#" class="button_learnmore">Learn more.</a>
      </div>

    </div>

  </div>

  <div id="hp_slider_2" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
  </div>

  <div id="hp_slider_3" class="tabcontent">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
  </div>

  <div id="hp_slider_4" class="tabcontent">
    <h3>fourth</h3>
    <p>Hello.</p>
  </div>





  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'hp_slider_1')">Button1 </button>

    <button class="tablinks" onclick="openCity(event, 'hp_slider_2')">Button2</button>

    <button class="tablinks" onclick="openCity(event, 'hp_slider_3')">Button3</button>

    <button class="tablinks" onclick="openCity(event,'hp_slider_4')">Button4</button>
  </div>



</div>

CSS

/* Container2 Styling */

.container2 {
  overflow:hidden;
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: #81A1AA;
  color: white;
  position: relative;
  font-size: 16px;
  overflow: auto;

}

/* Style the tab content */
.tabcontent {
  text-align: center;
  display: none;
}

.tabheading {
  font-size: 16px;
  padding: 10px 0;
}

.left {
float: left;
width: 50%;
height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
}


.slidertab {
padding-top: 50px;
display: block;

}

.right {
float: right;
width: 50%;
height: 100vh;
}

.texttab {
position: relative;

padding: 30px 70px;
}

.rightheading {

}

.righttext {
padding-bottom: 30px;
}

.button_learnmore {
    box-shadow: 0px 10px 14px -7px #4A6971;
    background:linear-gradient(to bottom, #4A6971 5%, #81A1AA 100%);
    background-color:#4A6971;
    border-radius:8px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-size:12px;
    padding: 10px 20px;
    text-decoration:none;
}

.button_learnmore:hover {
    background: #B5CFD6;
  color: black;

}

.button_learnmore:active {
    position:relative;
    top:1px;
}


/* Style the tab */
.tab {

  text-align: center;
  width: 100%;
  height: 50px;
  border: black solid 1px;
  position: absolute;
  bottom: 0;
  overflow: auto;

}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 15px 50px;
  transition: 0.3s;
  font-size: 16px;
  color: white;
  font-family: 'Raleway', sans-serif;

}

/* Change background color of buttons on hover */
.tab button:hover {
  color: #4A6971;
}

/* Create an active/current tablink class */
.tab button.active {
  color: #4A6971;
}

Answer 1

Видя ваш код и угадывая будущее расширение приложения, я полагаю, что вы должны использовать flex для решения проблемы.

.tab{
text-align: center;
width: 100%;
border:black solid 1px;
black solid 1px;
position: absolute;
bottom: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}

Таким образом, ваш код будет выглядеть так, как показано ниже.

   .container2 {
        overflow: hidden;
        height: 100vh;
        width: 100%;
        margin: 0;
        background-color: #81A1AA;
        color: white;
        position: relative;
        font-size: 16px;
        overflow: auto;

    }

    /* Style the tab content */
    .tabcontent {
        text-align: center;
        display: none;
    }

    .tabheading {
        font-size: 16px;
        padding: 10px 0;
    }

    .left {
        float: left;
        width: 50%;
        height: 100vh;
        display: flex;
        align-items: center;
        flex-direction: column;
    }


    .slidertab {
        padding-top: 50px;
        display: block;

    }

    .right {
        float: right;
        width: 50%;
        height: 100vh;
    }

    .texttab {
        position: relative;

        padding: 30px 70px;
    }

    .rightheading {}

    .righttext {
        padding-bottom: 30px;
    }

    .button_learnmore {
        box-shadow: 0px 10px 14px -7px #4A6971;
        background: linear-gradient(to bottom, #4A6971 5%, #81A1AA 100%);
        background-color: #4A6971;
        border-radius: 8px;
        display: inline-block;
        cursor: pointer;
        color: #ffffff;
        font-size: 12px;
        padding: 10px 20px;
        text-decoration: none;
    }

    .button_learnmore:hover {
        background: #B5CFD6;
        color: black;

    }

    .button_learnmore:active {
        position: relative;
        top: 1px;
    }


    /* Style the tab */
    .tab {

        
        border: black solid 1px;
       text-align: center;
width: 100%;


position: absolute;
bottom: 0;

display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;

    }

    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 15px 50px;
        transition: 0.3s;
        font-size: 16px;
        color: white;
        font-family: 'Raleway', sans-serif;

    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        color: #4A6971;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        color: #4A6971;
    }

    <div class="container2">

        <div id="hp_slider_1" class="tabcontent">

            <div class="left">
                <div class="tabheading">
                    <p>Heading</p>
                </div>

                <div class="slidertab">
                    <?php echo do_shortcode('[smartslider3 slider=14]');?>
                </div>


            </div>


            <div class="right">
                <div class="tabheading">
                    <p>Heading</p>
                </div>

                <div class="texttab">
                    <h4 class="rightheading">Content1</h4>
                    <p class="righttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                        in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <a href="#" class="button_learnmore">Learn more.</a>
                </div>

            </div>

        </div>

        <div id="hp_slider_2" class="tabcontent">
            <h3>Paris</h3>
            <p>Paris is the capital of France.</p>
        </div>

        <div id="hp_slider_3" class="tabcontent">
            <h3>Tokyo</h3>
            <p>Tokyo is the capital of Japan.</p>
        </div>

        <div id="hp_slider_4" class="tabcontent">
            <h3>fourth</h3>
            <p>Hello.</p>
        </div>





        <div class="tab">
            <button class="tablinks" onclick="openCity(event, 'hp_slider_1')">Button1 </button>

            <button class="tablinks" onclick="openCity(event, 'hp_slider_2')">Button2</button>

            <button class="tablinks" onclick="openCity(event, 'hp_slider_3')">Button3</button>

            <button class="tablinks" onclick="openCity(event,'hp_slider_4')">Button4</button>
        </div>



    </div>

Answer 2

Если бы я использовал Grid, код был бы

.container2 {
        display: grid;
        grid-template-rows: 1fr;
    }

    .left {
        width: 50%;
        float: left;
        text-align: center;
    }

    .right {
        width: 50%;
        float: right;
        text-align: center;
    }

    .tab {

        border: black solid 1px;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }

    .tab button {
        background-color: inherit;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 15px 50px;
        transition: 0.3s;
        font-size: 16px;
        
        font-family: 'Raleway', sans-serif;

    }

<div class="container2">

        <div id="hp_slider_1" class="tabcontent">

            <div class="left">
                <div class="tabheading">
                    <p>Heading</p>
                </div>

                <div class="slidertab">
                    <h4 class="rightheading">Content1</h4>
                    <p class="righttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                        in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <a href="#" class="button_learnmore">Learn more.</a>
                </div>


            </div>


            <div class="right">
                <div class="tabheading">
                    <p>Heading</p>
                </div>

                <div class="texttab">
                    <h4 class="rightheading">Content1</h4>
                    <p class="righttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                        in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <a href="#" class="button_learnmore">Learn more.</a>
                </div>

            </div>

        </div>

        <div id="hp_slider_2" class="tabcontent">
            <h3>Paris</h3>
            <p>Paris is the capital of France.</p>
        </div>

        <div id="hp_slider_3" class="tabcontent">
            <h3>Tokyo</h3>
            <p>Tokyo is the capital of Japan.</p>
        </div>

        <div id="hp_slider_4" class="tabcontent">
            <h3>fourth</h3>
            <p>Hello.</p>
        </div>





        <div class="tab">
            <button class="tablinks" onclick="openCity(event, 'hp_slider_1')">Button1 </button>

            <button class="tablinks" onclick="openCity(event, 'hp_slider_2')">Button2</button>

            <button class="tablinks" onclick="openCity(event, 'hp_slider_3')">Button3</button>

            <button class="tablinks" onclick="openCity(event,'hp_slider_4')">Button4</button>
        </div>



    </div>

Answer 3

Вы можете использовать стиль clear:all для div, что означает, что он появляется ниже предыдущих div. Или вы можете использовать тег <br clear="all">, который делает то же самое.