• 相邻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>
  • 相关阅读:
    一些前台技巧
    javascript中的面向对象
    vs.net 常用快捷键
    js和C#中的进制转换方法
    MFC中CDC相关图形,文本的一些使用方法(转)
    poj1505
    poj1401
    poj2533
    poj1504
    poj1384
  • 原文地址:https://www.cnblogs.com/tnnyang/p/4598024.html
Copyright © 2020-2023  润新知