超級實用的CSS佈局方案之多列布局(二)

兩列定寬+一列自適應

(1)原理、用法

  • 原理:這種情況與兩列定寬查不多。
  • 用法:先將左、中框設置爲float:left、width、margin-right,再設置右框overflow:hidden。

(2)代碼實例

<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="center">
<p>center</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>

<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="center">
<p>center</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>

<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="center">
<p>center</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>

<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="center">
<p>center</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>

歡迎各位想學習前端開發的小夥伴加入藍軌跡WEB開發交流羣 143046757 一同探討~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章