首頁 > web前端 > css教學 > 主體

如何在 CSS3 中建立不同寬度的列?

DDD
發布: 2024-10-30 07:39:28
原創
679 人瀏覽過

How Can I Create Columns with Different Widths in CSS3?

在CSS3 中指定不同的列寬

雖然CSS3 的多列佈局提供了一種創建多列佈局的便捷方法,但它並沒有允許指定不同的列寬。

在提供的範例中,需要兩列佈局,一列寬 20 像素,另一列寬 80 像素:

<code class="css"><div style="-webkit-column-count: 2;
            -webkit-column-rule: 1px solid black;
            -webkit-column-width: 80px;
             margin-left:20px;margin-top:20px;">
    <div id="picturebox" style="">picture box</div>
    <div id="nme">name</div>
</div></code>
登入後複製

這是不可能。 -webkit-column-width 屬性平等地設定所有列的寬度。造成此限制的原因是,多列佈局功能是為內容在相等的列之間流動而設計的,以保持一致和平衡的佈局。

因此,為了達到預期的效果,可以使用替代方法,例如使用多個列div 或浮動技術可能更合適。

以上是如何在 CSS3 中建立不同寬度的列?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板