• 相邻div实现一个跟着另一个自适应高度示例代码


     方法一:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>new document</title>
    <style type="text/css">
    .wrap{
    border:1px solid #006699; width:500px; overflow:hidden;
    }
    .wrap .left{
    float:left; width:50%; background:#eee; padding-bottom:3000px; margin-bottom:-3000px;
    }
    .wrap .right{
    float:right; width:50%; background:#f5f6fb; padding-bottom:3000px; margin-bottom:-3000px;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    <div class="left">
    <p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p>
    </div>
    <div class="right">
    sfds
    <p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p>
    <p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p><p>内容</br></p>
    </div>
    </div>
    </body>
    </html> 

    方法二:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    #main{width:300px;position:relative;}
    #div1{width:140px;border-right:1px solid #ccc;}
    #div2{width:140px;border:1px solid #ccc;height:100%;right:0px;top:0px;position:absolute;} 
    </style>
    </head>
    
    <body>
    <div id="main">
      <div id="div1">111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>222<br/>222<br/>222<br/>222</div>
      <div id="div2">2222</div>   
    </div>
    </body>
    </html>

     方法三:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> 
    #main{width:220px;height:300px;border:1px solid black;display:flex;}
    #main div{flex:1;}
    </style>
    </head>
    <body>
    <div id="main">
      <div style="background-color:coral;">红色</div>
      <div style="background-color:lightblue;">蓝色</div>  
      <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
    </div>
    <p><b>注意:</b>Safari 不支持 flex 属性。</p>
    </body>
    </html>
  • 相关阅读:
    linux如何用yum进行部署xampp环境
    jmeter关联案例的几种方法
    jmeter中元件
    CentOS7在VMware下设置成桥接模式
    CentOS7使用vsftpd搭建ftp
    虚拟机WMware15和CnetOS7安装
    MySql忘记密码的解决方案
    Windows下MySql8解压版的安装与完全卸载
    Idea设置统一为utf-8编码格式
    Idea常用快捷键
  • 原文地址:https://www.cnblogs.com/tnnyang/p/4598024.html
Copyright © 2020-2023  润新知