CSS佈局：在一個div中使兩個列元素自動等高
阿新 • • 發佈：2018-12-17
html:
<body> <div class="content-wrapper"> <div class="left"> <h1>簡歷</h1> </div> <div class="right"> <h2>基本資訊</h2> <div class="basic_info"> <block class="block"> <h4 class="bi">姓名</h4> <p class="bi">張三</p> </block> <block class="block"> <h4 class="bi">性別</h4> <p class="bi">男</p> </block> <block class="block"> <h4 class="bi">應聘職位</h4> <p class="bi">Web前端工程師</p> </block> </div> </div> </div> </body>
css:
<style> .content-wrapper{ overflow:hidden;//overflow針對的值是margin-bottom的值（已被提高至right的底部），超過mairgin-bottom的部分全被抹掉 } .left{ font-size:20px; width:200px; float:left; color:white; background-color:rgb(101, 165, 250); text-align:center; padding-top:50px; padding-bottom:3000px; margin-bottom:-3000px; font-family: "宋體"; } .right{ float:left; margin-left:20px; padding-bottom:3000px; margin-bottom:-3000px; } </style>