html - 如何防止 div 在分辨率调整大小时重叠而不会溢出？

Question

我试图在不使用 overflow 的情况下使这些 div 元素表不重叠属性(property)。我知道我可以增加 div 框的高度，但我希望 div 元素是灵活的，这样无论屏幕分辨率如何，一个 div 都会堆叠在另一个之上。有什么想法吗？

CSS:

 .tbl_box2 {
   display: inline-flex;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 200px;  
  }

  .table2 {
   width: 25%;
   height: 315px;
   text-align: center;
   background-color: rgba(153,153,153,0.5);         
  }

  .table3 {
   width: 75%;
   height: 315px;
   vertical-align: center;
  }

HTML:

<div class = "tbl_box2">
          <table class = "table2">
            <tr>
               <td><img style="display:block;" width="100%" src="https://www.kasandbox.org/programming-images/animals/retriever.png" /></td>
            </tr>
          </table>
          <table class = "table3">
            <tr>
              <th><h2>The domestic dog</h2> <i>(Canis lupus familiaris)</i></th>
            </tr>
              <tr>
               <td style="background-color: rgba(0,0,0,0.5);">
                <p>
                  The domestic dog has been selectively bred for millennia for various behaviors, sensory capabilities, and physical attributes.
                 </p>
                 <p>
                  Being the oldest domesticated animals, their long association with people has allowed dogs to be uniquely attuned to human behavior, as well as thrive on a starch-rich diet which would be inadequate for other canid species.
                 </p>
                 <p>
                  Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world.
                  </p>
                </td>
              </tr>
            </table>
          </div>
          <div class = "tbl_box2">
          <table class = "table2">
            <tr>
               <td><img style="display:block;" width="100%" src="https://www.kasandbox.org/programming-images/animals/retriever.png" /></td>
            </tr>
          </table>
          <table class = "table3">
            <tr>
              <th><h2>The domestic dog</h2> <i>(Canis lupus familiaris)</i></th>
            </tr>
              <tr>
               <td style="background-color: rgba(0,0,0,0.5);">
                <p>
                  The domestic dog has been selectively bred for millennia for various behaviors, sensory capabilities, and physical attributes.
                 </p>
                 <p>
                  Being the oldest domesticated animals, their long association with people has allowed dogs to be uniquely attuned to human behavior, as well as thrive on a starch-rich diet which would be inadequate for other canid species.
                 </p>
                 <p>
                  Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world.
                  </p>
                </td>
              </tr>
            </table>
          </div>
          <div class = "tbl_box2">
          <table class = "table2">
            <tr>
               <td><img style="display:block;" width="100%" src="https://www.kasandbox.org/programming-images/animals/retriever.png" /></td>
            </tr>
          </table>
          <table class = "table3">
            <tr>
              <th><h2>The domestic dog</h2> <i>(Canis lupus familiaris)</i></th>
            </tr>
              <tr>
               <td style="background-color: rgba(0,0,0,0.5);">
                <p>
                  The domestic dog has been selectively bred for millennia for various behaviors, sensory capabilities, and physical attributes.
                 </p>
                 <p>
                  Being the oldest domesticated animals, their long association with people has allowed dogs to be uniquely attuned to human behavior, as well as thrive on a starch-rich diet which would be inadequate for other canid species.
                 </p>
                 <p>
                  Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world.
                  </p>
                </td>
              </tr>
            </table>
          </div>

Answer 1

在这里，您可以使用百分比 % 而不是像素来设置元素的高度。当您将 % 用于 css 时，它会相对于屏幕分辨率来考虑它。或者您可以将高度参数更改为自动。

height:auto

每个表格的文本溢出，因为您为外部 div 设置的大小比内部 div 小。我在 css 中应用了一些更改。检查这是否对您有用。

 .tbl_box2 {
   display: inline-flex;
   margin: 0;
   padding: 0;
   width: 100%;
   height: auto;  
  }

  .table2 {
   width: 25%;
   height: auto;
   text-align: center;
   background-color: rgba(153,153,153,0.5);         
  }

  .table3 {
   width: 75%;
   height: auto;
   vertical-align: center;
  }