心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

介绍几种CSS实现两列等高的方法

发布时间：2022-06-26 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了介绍几种CSS实现两列等高的方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

问题描述：

两列布局，其中右侧的高度是根据内容变化的，希望左侧的高度也能和右侧保持一致。

示例中左侧为青色背景的行内块，右侧为图片，代码如下：

介绍几种CSS实现两列等高的方法

介绍几种CSS实现两列等高的方法

 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

右侧的高度根据图片的变化而变化，而左侧的高度默认情况下没有保持一致。

介绍几种CSS实现两列等高的方法

介绍几种CSS实现两列等高的方法

 

 这就是等高列问题，介绍几种实现实现方法： 

一、Flex方法

介绍几种CSS实现两列等高的方法

介绍几种CSS实现两列等高的方法

 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方法

介绍几种CSS实现两列等高的方法

介绍几种CSS实现两列等高的方法

 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%时会自动适应父容器的高度。所以当右侧的高度变化撑起父容器不同的高度时，左侧也会保持一致。

介绍几种CSS实现两列等高的方法

介绍几种CSS实现两列等高的方法

 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方法

介绍几种CSS实现两列等高的方法

介绍几种CSS实现两列等高的方法

 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                 width: 200px;
15                 padding-top: 10px;
16                 background-color: #76e2e4;
17                 text-align: center;
18             }
19             img {
20                 display: table-cell;
21                 max-width: 500px;
22                 max-height: 600px;
23             }
24         </style>
25     </head>
26     <body>
27         <h4>Equal Height Table</h4>
28         <div class="container">
29             <div class="left">
30                 <button id="mzzi1">换个妹子</button>
31             </div>
32             <img
33                 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"
34                 alt=""
35             />
36         </div>
37     </body>
38     <script>
39         let urls = [
40             "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",
41         ];
42         window.onload = () => {
43             let img = document.querySelector(".container img");
44             let btns = document.querySelectorAll(".left button");
45             btns[0].onclick = () => {
46                 img.src = urls[0];
47             };
48         };
49     </script>
50 </html>
View Code

效果图：

介绍几种CSS实现两列等高的方法

介绍几种CSS实现两列等高的方法

说明：

妹子图片来自网络，侵必删~

 

脚本宝典总结

以上是脚本宝典为你收集整理的介绍几种CSS实现两列等高的方法全部内容，希望文章能够帮你解决介绍几种CSS实现两列等高的方法所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的心得技巧相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程