CSS は左側 (右側) に固定幅を実装し、右側 (左側) に適応幅を実装します --- クリアフローティング
Oct 15, 2016 am 10:32 AM老话长谈,css的不固定适应布局 不管是面试还是在平时的工作中,这样的布局形式一直都在用着,很常见,所以今天我就拿出来在唠叨一下, 既是给自己一个备忘存储,也是一个学习巩固的参考,知道大家都会,还是要记忆一下,不为其他,就为打好基础。
话说太多, 直接上代码,一看就能明白。 也许你会不屑一顾的说简单,可是我就喜欢写一些。。。。。。作为一个菜鸟,就要从基础努力学习才行。
方法多种, 你有新的方法可以补充说明,在此感谢!!
一、左边布局固定,右边自适应的布局
*{ margin:0; padding:0}
.whole{ width:100%;}
<div class="whole">
<p>自适应测试</p>
<div class="left">固定左侧 300px</div>
<div class="right">右侧自适应</div>
</div>
方法1: 左侧用float浮动,给固定宽度,右侧 左边距的距离==左侧层的宽度
css代码:
.left{ float:left;width:300px; background:red}
.right{ margin-left:300px; background:green; width:100%}
方法2:左边绝对定位absolate,右边代码没变化 还是右侧 左边距的距离==左侧层的宽度;
css代码:
.left{ position: absolute; left:0; width:300px; background:red}
.right{ margin-left:300px; background:green; width:100%}
方法3(个人喜好用):左右两边都用绝对定位absolute, 父级相对定义(不影响,建议加个相对定义,避免重叠)
css代码:
.left{ position: absolute; left:0; width:300px; background:red}
.right{ position: absolute; left:300px; background:green; width:100%}
二、左边布局不固定,右边布局固定-----方法一致,位置换下而已
<div class="whole">
<p>自适应测试</p>
<div class="left">左侧自适应</div>
<div class="right">右侧宽度固定</div>
</div>
方法1、左侧用左浮动,右边距==右侧层的宽度的负值(因为你是左撑开,距离右侧的距离不错层), 右侧的有浮动,固定宽度
.left{ float:left; width:100%; margin-right:-300px; background: red; }
.right{ float: right; width: 300px;background: blue;}
方法2、左右两边都用绝对定位absolute, 父级相对定义(不影响,建议加个相对定义,避免重叠) .left{ position: absolute; left:0; width: 100%; background: red;}
.right{ position: absolute; left:200px; width:200px; background: green;}
方法3、
清除浮动的方法就一笔带过, 都会
1、在浮动层的下面单独定义一个层 <div class="clear"></div> .clear{ clear:both}
2、伪类方法:after (用在父类的布局层上)-常用
.father::after,.father::before{ clear: both; content: ""; display: table;}
<div class='father'>
<div class="son-flotleft"></div>
<div class="son-flotrgt"></div>
</div>
3.親要素オーバーフローを非表示または自動に設定します。高さを固定することも可能です - 推奨されません
.お父さん オーバーフロー : 幅: 100%; //オーバーフロー:自動; ;

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか?

HTML5&lt; meter&gt;を使用するにはどうすればよいですか 範囲内に数値データを表示する要素?

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素?
