介紹幾種CSS實現兩列等高的方法

本文轉載自查看原文 2022-01-02 20:45 923

問題描述：

兩列布局，其中右側的高度是根據內容變化的，希望左側的高度也能和右側保持一致。

示例中左側為青色背景的行內塊，右側為圖片，代碼如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6         <title>Equal Height</title>
 7         <style>
 8             .container {
 9                 /* 將父元素的字體設為0，解決圖片和行內元素之間的間距 */
10                 font-size: 0;
11                 border: 1px solid #999;
12             }
13             .left {
14                 width: 200px;
15                 padding: 10px 0;
16                 background-color: #76e2e4;
17                 text-align: center;
18                 display: inline-block;
19             }
20             img {
21                 vertical-align: top;
22                 max-width: 500px;
23                 max-height: 600px;
24             }
25         </style>
26     </head>
27     <body>
28         <h4>Equal Height</h4>
29         <div class="container">
30             <div class="left">
31                 <button id="mzzi1">換個妹子</button>
32             </div>
33             <img
34                 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F100H0113K8%2F20100G13K8-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709622&t=df224c9393368e871e7bcc7a454e58d9"
35                 alt=""
36             />
37         </div>
38     </body>
39     <script>
40         let urls = [
41             "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-05-13%2F5ebba71243a85.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709918&t=41e048a206e8ac4cc241790f520454cb"
42         ];
43         window.onload = () => {
44             let img = document.querySelector(".container img");
45             let btns = document.querySelectorAll(".left button");
46             btns[0].onclick = () => {
47                 img.src = urls[0];
48             };
49         };
50     </script>
51 </html>

View Code

右側的高度根據圖片的變化而變化，而左側的高度默認情況下沒有保持一致。

這就是等高列問題，介紹幾種實現實現方法：

一、Flex方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6         <title>Equal Height Flex</title>
 7         <style>
 8             .container {
 9                 display: flex;
10                 border: 1px solid #999;
11             }
12             .left {
13                 width: 200px;
14                 padding-top: 10px;
15                 background-color: #76e2e4;
16                 text-align: center;
17             }
18             img {
19                 max-width: 500px;
20                 max-height: 600px;
21             }
22         </style>
23     </head>
24     <body>
25         <h4>Equal Height Flex</h4>
26         <div class="container">
27             <div class="left">
28                 <button id="mzzi1">換個妹子</button>
29             </div>
30             <img
31                 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F100H0113K8%2F20100G13K8-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709622&t=df224c9393368e871e7bcc7a454e58d9"
32                 alt=""
33             />
34         </div>
35     </body>
36     <script>
37         let urls = [
38             "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-05-13%2F5ebba71243a85.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709918&t=41e048a206e8ac4cc241790f520454cb",
39         ];
40         window.onload = () => {
41             let img = document.querySelector(".container img");
42             let btns = document.querySelectorAll(".left button");
43             btns[0].onclick = () => {
44                 img.src = urls[0];
45             };
46         };
47     </script>
48 </html>

View Code

二、Grid方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6         <title>Equal Height Grid</title>
 7         <style>
 8             .container {
 9                 display: grid;
10                 grid-template-columns: 200px auto;
11                 border: 1px solid #999;
12             }
13             .left {
14                 width: 200px;
15                 padding-top: 10px;
16                 background-color: #76e2e4;
17                 text-align: center;
18             }
19             img {
20                 max-width: 500px;
21                 max-height: 600px;
22             }
23         </style>
24     </head>
25     <body>
26         <h4>Equal Height Grid</h4>
27         <div class="container">
28             <div class="left">
29                 <button id="mzzi1">換個妹子</button>
30             </div>
31             <img
32                 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F100H0113K8%2F20100G13K8-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709622&t=df224c9393368e871e7bcc7a454e58d9"
33                 alt=""
34             />
35         </div>
36     </body>
37     <script>
38         let urls = [
39             "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-05-13%2F5ebba71243a85.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709918&t=41e048a206e8ac4cc241790f520454cb",
40         ];
41         window.onload = () => {
42             let img = document.querySelector(".container img");
43             let btns = document.querySelectorAll(".left button");
44             btns[0].onclick = () => {
45                 img.src = urls[0];
46             };
47         };
48     </script>
49 </html>

View Code

三、Position：sbsolute；方法

父容器相對定位，子元素絕對定位，高度為100%時會自動適應父容器的高度。所以當右側的高度變化撐起父容器不同的高度時，左側也會保持一致。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6         <title>Equal Height Position</title>
 7         <style>
 8             .container {
 9                 position: relative;
10                 border: 1px solid #999;
11             }
12             .left {
13                 position: absolute;
14                 box-sizing: border-box;
15                 width: 200px;
16                 height: 100%;
17                 padding-top: 10px;
18                 background-color: #76e2e4;
19                 text-align: center;
20             }
21             img {
22                 margin-left: 200px;
23                 vertical-align: bottom;
24                 max-width: 500px;
25                 max-height: 600px;
26             }
27         </style>
28     </head>
29     <body>
30         <h4>Equal Height Position</h4>
31         <div class="container">
32             <div class="left">
33                 <button id="mzzi1">換個妹子</button>
34             </div>
35             <img
36                 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F100H0113K8%2F20100G13K8-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709622&t=df224c9393368e871e7bcc7a454e58d9"
37                 alt=""
38             />
39         </div>
40     </body>
41     <script>
42         let urls = [
43             "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-05-13%2F5ebba71243a85.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709918&t=41e048a206e8ac4cc241790f520454cb",
44         ];
45         window.onload = () => {
46             let img = document.querySelector(".container img");
47             let btns = document.querySelectorAll(".left button");
48             btns[0].onclick = () => {
49                 img.src = urls[0];
50             };
51         };
52     </script>
53 </html>

View Code

四、Table方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6         <title>Equal Height Table</title>
 7         <style>
 8             .container {
 9                 display: table;
10                 border: 1px solid #999;
11             }
12             .left {
13                 display: table-cell;
14                 vertical-align: top;
15                 width: 200px;
16                 padding-top: 10px;
17                 background-color: #76e2e4;
18                 text-align: center;
19             }
20             img {
21                 font-size: 0;
22                 display: table-cell;
23                 max-width: 500px;
24                 max-height: 600px;
25             }
26         </style>
27     </head>
28     <body>
29         <h4>Equal Height Table</h4>
30         <div class="container">
31             <div class="left">
32                 <button id="mzzi1">換個妹子</button>
33             </div>
34             <img
35                 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F100H0113K8%2F20100G13K8-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709622&t=df224c9393368e871e7bcc7a454e58d9"
36                 alt=""
37             />
38         </div>
39     </body>
40     <script>
41         let urls = [
42             "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-05-13%2F5ebba71243a85.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709918&t=41e048a206e8ac4cc241790f520454cb",
43         ];
44         window.onload = () => {
45             let img = document.querySelector(".container img");
46             let btns = document.querySelectorAll(".left button");
47             btns[0].onclick = () => {
48                 img.src = urls[0];
49             };
50         };
51     </script>
52 </html>

View Code

五、Margin: -9999px + Pading: 9999px方法

垂直方向margin無法改變元素的內部尺寸，但卻能改變外部尺寸，這里我們設置了margin-bottom:-9999px意味着元素的外部尺寸在垂直方向上小了9999px。默認情況下，垂直方向塊級元素上下距離是0，一旦margin-bottom:-9999px就意味着后面所有元素和上面元素的空間距離變成了-9999px，也就是后面元素都往上移動了9999px。此時，通過神來一筆padding-bottom:9999px增加元素高度，這正負一抵消，對布局層並無影響，但卻帶來了我們需要的東西—視覺層多了9999px高度的可使用的背景色。但是，9999px太大了，所以需要配合父級overflow:hidden把多出來的色塊背景隱藏掉，於是實現了視覺上的等高布局效果。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6         <title>Equal Height Margin</title>
 7         <style>
 8             /* 容器設置自然高度，設置overflow: hidden;
 9             子元素設置
10             margin-bottom: -9999px;
11             padding-bottom: 9999px; */
12             .container {
13                 overflow: hidden;
14                 border: 1px solid #999;
15             }
16             .left {
17                 float: left;
18                 width: 200px;
19                 padding-top: 10px;
20                 background-color: #76e2e4;
21                 text-align: center;
22                 margin-bottom: -9999px;
23                 padding-bottom: 9999px;
24             }
25             img {
26                 /* 對齊 */
27                 vertical-align: middle;
28                 max-width: 500px;
29                 max-height: 600px;
30             }
31         </style>
32     </head>
33     <body>
34         <h4>Equal Height Margin</h4>
35         <div class="container">
36             <div class="left">
37                 <button id="mzzi1">換個妹子</button>
38             </div>
39             <img
40                 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F100H0113K8%2F20100G13K8-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709622&t=df224c9393368e871e7bcc7a454e58d9"
41                 alt=""
42             />
43         </div>
44     </body>
45     <script>
46         let urls = [
47             "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-05-13%2F5ebba71243a85.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709918&t=41e048a206e8ac4cc241790f520454cb"
48         ];
49         window.onload = () => {
50             let img = document.querySelector(".container img");
51             let btns = document.querySelectorAll(".left button");
52             btns[0].onclick = () => {
53                 img.src = urls[0];
54             };
55         };
56     </script>
57 </html>

View Code

效果：

說明：

妹子圖片來自網絡，侵必刪~

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 純CSS實現三列DIV等高布局純css實現div三列等高布局的最簡單方法簡化版/也可以多列 css實現左右兩個div等高 CSS技巧 (2) · 多列等高布局 css設置多列等高布局 div+css實現的左右兩個等高div CSS實現等高布局 css flex經典三大布局：垂直居中，兩列等高，自適應寬 CSS實現兩列布局，一列固定寬度，一列寬度自適應方法 CSS布局奇淫技巧之-多列等高