如何修复我的 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

您可以在 div 上使用clear:all样式，这意味着它出现在前一个 div 的下方。 或者您可以使用基本相同的标签<br clear="all"> 。

Answer 3

如果我要使用网格，代码将是

 .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>