自己總結(jié)了一下
1、左側(cè)固定，右側(cè)自適應(yīng)?
2、右側(cè)固定，左側(cè)自適應(yīng)
3、左右兩側(cè)固定，中間自適應(yīng)
?
?
<body class="sqh_bg_fafafa">
<div>左側(cè)固定，右側(cè)自適應(yīng)</div>
<div>
<div style="width: 200px;float: left;border: 1px solid red;">width: 200px;float: left</div>
<div style="margin-left: 201px;border: 1px solid blue;">margin-left: 201px</div>
</div>
<hr>
<div>右側(cè)固定，左側(cè)自適應(yīng)</div>
<div>
<div style="width: 200px;float: right;border: 1px solid red;">width: 200px;float: left</div>
<div style="margin-right: 201px;border: 1px solid blue;">margin-left: 201px</div>
</div>
<div style="color: red">注意：右邊的div代碼一定要是寫在左邊代碼的上面，float:right代碼，注意代碼順序，否則代碼不正確</div>
<div style="height: 20px;"></div>
<div>
<div style="margin-right: 201px;border: 1px solid blue;">margin-left: 201px</div>
<div style="width: 200px;float: right;border: 1px solid red;">width: 200px;float: left</div>
</div>
<hr>
<div>左右固定，中間自適應(yīng)</div>
<div>
<div style="width: 200px;float: left;border: 1px solid red;">width: 200px;float: left</div>
<div style="margin-left: 201px;">
<div style="float: right;width: 200px;border: 1px solid blue;">float: right;width: 200px;</div>
<div style="margin-right: 201px;border: 1px solid green;">margin-right: 201px;</div>
</div>
</div>
<div style="height: 20px;"></div>
<div>
<div style="width: 200px;float: right;border: 1px solid red;">width: 200px;float: left</div>
<div style="margin-right: 201px;">
<div style="float: left;width: 200px;border: 1px solid blue;">float: left;width: 200px;</div>
<div style="margin-left: 201px;border: 1px solid green">margin-left: 201px;</div>
</div>
</div>
</body>
?
?
?
?
<li class="sqh_overflow_hidden sqh_relative border_b_bottom_eee padding_top_10 padding_bottom_10" >
<div style="width: 20px;" class="float_right" target="http://www.baidu.com">
<div class="icon iconfont sqh_absolute sqh_position_top_20" ></div>
</div>
<div class="sqh_line_height_15 sqh_overflow_hidden" style="margin-right: 20px">
<div class="float_left width_70px padding_left_10">
險(xiǎn)種名稱
</div>
<div class="margin_left_75">
<input type="text" class="all_width clear_border" >
</div>
</div>
</li>
?
<style>
.sqh_pointer {
cursor: pointer;
}
.float_right {
float: right;
}
.sqh_overflow_hidden {
overflow: hidden;
}
.sqh_line_height_15 {
line-height: 1.5;
}
.width_70px {
width: 70px;
}
.padding_left_10 {
padding-left: 10px;
}
.margin_left_75 {
margin-left: 75px;
}
.all_width {
width: 100%;
}
.clear_border {
border: medium none !important;
}
.border_b_bottom_eee {
border-bottom: 1px solid #eeeeee;
}
.sqh_relative {
position: relative;
}
.padding_bottom_10 {
padding-bottom: 10px;
}
.padding_top_10 {
padding-top: 10px;
}
</style>
?
原理說明
?
- 右側(cè)固定寬度，左側(cè)百分百
- 以左側(cè)為父div，子div 左側(cè)固定，右側(cè)百分百
??
??
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
