CSSで下揃えを実現するにはどうすればよいですか? CSSで下揃えを実現する3つの方法-CSSチュートリアル-php.cn

CSSで下揃えを実現するにはどうすればよいですか? CSSで下揃えを実現する3つの方法

不言

リリース： 2018-09-18 14:49:06

オリジナル

11687 人が閲覧しました

この記事の内容は、CSS で下揃えを実現する方法についてです。 CSS で下揃えを実現する 3 つの方法は、参考になると思います。

下揃え効果を実現するための CSS

会社のビジネス要件により、次の図の赤い領域の効果を実現する必要があります:
CSSで下揃えを実現するにはどうすればよいですか? CSSで下揃えを実現する3つの方法

CSSで下揃えを実現するにはどうすればよいですか? CSSで下揃えを実現する3つの方法

効果の説明:

1. 赤い領域のデータは次のとおりです。逆順（つまり、下から数えて 1、2、3、4、5）に並べて一番下に表示します。データが多すぎる場合は、スクロールバーを表示する必要があります。 **スクロールバーを一番下まで引く必要があります**
3. データは WebSocket からプッシュされます。プッシュ間隔は数十ミリ秒です#4。IE10 と互換性がある必要があります。上記のブラウザ

実現するにはフレックスレイアウトを使用してください

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container{
        position: relative;
        width: 300px;
        height: 500px;
        margin: 10px auto;
        border: 1px solid #f60;
        color: #fff;
    }
    .top,
    .bottom{
        height: 50%;
        padding: 20px;
    }
    .top{
        background-color: #da2e22;
    }
    .top>ul{
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .bottom{
        overflow: auto;
        background-color: #1e1e1e;
    }
</style>

ログイン後にコピー

<div>
    <div>
        <ul>
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </div>
</div>

ログイン後にコピー

フレックスレイアウトを使用することが現時点での最良の解決策であり、サブ要素のレイアウトは引き続き 1、2、3、4、の順序でレイアウトされます。 5 では、ブラウザはレンダリング時に自動的に反転し、スクロールバーも反転します。つまり、自動的に下部に配置されます。

しかし

IE10は今のところ対応していないので、今回のプロジェクトでは使えないので、別の方法を探すしかありません。 padding-top を使用して達成する

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container{
        position: relative;
        width: 300px;
        height: 500px;
        margin: 10px auto;
        border: 1px solid #f60;
        color: #fff;
    }
    .top,
    .bottom{
        height: 50%;
        padding: 20px;
    }
    .top{
        background-color: #da2e22;
    }
    .top>ul{
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .bottom{
        overflow: auto;
        background-color: #1e1e1e;
    }
</style>

ログイン後にコピー

<div>
    <div>
        <ul>
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </div>
</div>

ログイン後にコピー

padding-top を使用するのが最も簡単に考えられますが、純粋な CSS では実装できず、js を使用して計算する必要もあります。プロジェクトの初めに、padding-top js 計算を実装しましたが、この実装方法では、データが WebSocket にプッシュされるたびに計算を実行する必要がありました。では、もっと良い方法はあるのでしょうか？答えは間違いなく「はい」です。CSS の世界では常に予期せぬことが起こります。重要なのは、強力な内部スキルを備えていることです。

table-cell を使用して

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container{
        position: relative;
        width: 300px;
        height: 500px;
        margin: 10px auto;
        border: 1px solid #f60;
        color: #fff;
    }
    .top,
    .bottom{
        height: 50%;
        padding: 20px;
        overflow: auto;
    }
    .top{
        background-color: #da2e22;
    }
    .top-container{
        display: table;
        width: 100%;
        height: 100%;
    }
    .top-container>ul{
        display: table-cell;
        vertical-align: bottom;
        width: 100%;
        height: 100%;
    }
    .bottom{
        background-color: #1e1e1e;
    }
</style>

ログイン後にコピー

<div>
    <div>
        <div>
            <ul>
                <li>我是第1个li元素</li>
                <li>我是第2个li元素</li>
                <li>我是第3个li元素</li>
                <li>我是第4个li元素</li>
                <li>我是第5个li元素</li>
            </ul>
        </div>
    </div>
    <div>
        <ul>
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </div>
</div>

ログイン後にコピー

を実現する