CSS 開発のヒント

CSS スキルについては Web サイトにたくさん掲載されていますので、今日は仕事で遭遇する可能性のある問題をまとめ、CSS を使用した解決策についてお話します。 複数列の等高レイアウトとは何ですか?

クリックして片側にテキストを追加すると、反対側の背景も追加されます。

html コード:

<div id="container">
    <div class="left">haorooms多列等高布局左</div> 
    <div class="right" id="rights">多列等高布局,使用正负 margin 与 padding 相冲的方式实现。</div></div>

方法 1: パディングと競合するように正と負のマージンを使用します

   #container{
    width:400px;
    margin:0 auto;
    background:#eee;
    overflow:hidden;}.left,.right{
    width:200px;
    float:left;
    font-size: 16px;
    line-height:24px;
    color:#333;
    padding-bottom:5000px;
    margin-bottom:-5000px;}.left{
    background-color: deeppink;}.right{
    background-color:yellowgreen;}

十分な大きさのパディングと負のマージンを与えます

2 番目に、display:flex を使用して実現します

この方法は非常に便利です。モバイル端末でよく使用します。コンテナを display:flex に設定し、子要素を flex:1 に設定するだけです。

3. Display:table-cell の実装

上記のメソッドと同様に、コンテナーは display:table; に設定されます。

4. 親コンテナの背景色の設定

は次のとおりです:

#container{
    width:400px;
    margin:0 auto;
    background-color: deeppink;
    overflow:hidden;}.left,.right{
    width:200px;
    float:left;
    font-size: 16px;
    line-height:24px;
    color:#333;}.right{
    background-color:yellowgreen;}

5. 親コンテナの複数の背景色 - 線形グラデーション

#container{
    width:400px;
    margin:0 auto;
    background-image:
        linear-gradient(90deg, yellowgreen 50%, deeppink 0);
    overflow:hidden;}.left,.right{
    width:200px;
    float:left;
    font-size: 16px;
    line-height:24px;
    color:#333;}

6. ボーダーの実装

   #container{
     border-left:200px solid yellowgreen;
     background-color:deeppink;
     width:200px;
     font-size: 16px;
     line-height:24px;
     color:#333;
    }
    .left{
        width:200px;
        margin-left:-200px;
        float:left;
    }

レイアウト

方法 1: 表示: フレックス

このメソッドは、実装が比較的簡単で、モバイル レイアウトに適しています。

方法 2: 擬似要素と text-align:justify を使用する

html コードは次のとおりです:

<div class="container">
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </div></div>

CSS コードは次のとおりです:

.justify{  text-align: justify;  text-align-last: justify; // 新增这一行}.justify i{  width:24px;  line-height:24px;  display:inline-block;  text-align:center;}
text-align-last兼容性不是很好，可以使用::after，
.justify{  text-align: justify;}.justify i{  width:24px;  line-height:24px;  display:inline-block;  text-align:center;  border-radius:50%;}.justify:after {  content: "";  display: inline-block;  position: relative;  width: 100%;}

リスト レイアウトの境界線の問題

方法 1: マイナスのマージン

アイデア:

外側のレイヤーに幅を設定し、オーバーフローを非表示に設定し、内側のレイヤーに負のマージンを設定します。margin-left: -1px 左マージンを非表示にできます

html コードは次のとおりです:

<div class="ul-container">
    <ul>
        <li>haorooms</li>
        <li>测试</li>
        <li>hao测试</li>
        <li>右侧</li>
        <li>边界线</li>
        <li>消失</li>
        <li>测试</li>
    </ul></div>

css コード:

ul{
    width: 300px;
    margin-left:-1px;}li{
    float:left;
    width:99px;
    line-height:30px;
    text-align:center;
    border-left:1px solid #999;
    font-size:18px;
    margin-bottom:10px;}.ul-container{
    width: 300px; 
    margin: 50px auto;
    overflow:hidden;
    background: #eee;
    padding:10px 0;}

方法 2: 疑似 クラス セレクターを使用します

// 疑似クラス セレクターを使用して 3n 番目の要素を選択し、境界線を削除します li:nth-child(3n){
border-right:none;}

仕事でよくある問題はたくさんあります。よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注意ください。

関連記事:

CSS3で蝶が飛ぶアニメーションを作成する方法

css3をクリックして波紋効果を表示

CSS3を使用して不規則な画像の切り替え特殊効果を作成する方法

以上がCSS 開発のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。