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