CSS로 하단 정렬을 달성하는 여러 방법에 대한 샘플 코드-CSS 튜토리얼-php.cn

CSS로 하단 정렬을 달성하는 여러 방법에 대한 샘플 코드

青灯夜游

풀어 주다： 2018-10-09 17:18:17

앞으로

2898명이 탐색했습니다.

이 글은 하단 정렬을 달성하기 위한 다양한 CSS 방법의 샘플 코드에 대한 관련 정보를 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

회사의 비즈니스 요구 사항으로 인해 아래 그림의 빨간색 영역의 효과를 달성해야 합니다.

#🎜🎜 #

효과 설명:

1. 빨간색 영역의 데이터를 반전해야 합니다(즉, 아래쪽부터 숫자를 세면 1이 됩니다. 2, 3, 4, 5) 하단에 표시됨 #🎜 🎜#2. 데이터가 너무 많을 경우 스크롤바를 표시하고 **스크롤바를 하단으로 당겨야함**# 🎜🎜#3. 데이터는 웹소켓에서 푸시되며 푸시 간격은 수십 밀리초입니다

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>

로그인 후 복사

<p class="container">
    <p class="top">
        <ul style="padding-top: 104px;">
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </p>
    <p class="bottom">
        <ul>
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </p>
</p>

로그인 후 복사

현재로서는 flex 레이아웃을 사용하는 것이 가장 좋은 솔루션입니다. 하위 요소의 레이아웃은 여전히 1, 2, 3을 따르며, 4, 5의 순서로 레이아웃을 수행하면 브라우저는 렌더링 시 자동으로 반전되며 스크롤 막대도 반전됩니다. 즉, 자동으로 하단에 배치됩니다. 그런데 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>

로그인 후 복사

<p class="container">
    <p class="top">
        <ul style="padding-top: 104px;">
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </p>
    <p class="bottom">
        <ul>
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </p>
</p>

로그인 후 복사

탑 패딩을 사용하는 것이 가장 생각하기 쉬운 방법이지만 구현할 수는 없습니다. 순수 CSS를 구현하려면 계산에도 js를 사용해야 합니다. 프로젝트 초기에는 padding-top+js 계산을 구현했는데, 이렇게 구현하면 웹소켓에 데이터가 하나 올라올 때마다 계산을 해야 한다는 불편함을 느꼈습니다. 그럼 더 좋은 방법이 있나요? 대답은 '그렇다'입니다. CSS 세계에는 항상 예상치 못한 놀라움이 있습니다. 핵심은 강력한 내부 기술을 갖는 것입니다.

테이블 셀을 사용하여 달성

<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>

로그인 후 복사

<p class="container">
    <p class="top">
        <p class="top-container">
            <ul>
                <li>我是第1个li元素</li>
                <li>我是第2个li元素</li>
                <li>我是第3个li元素</li>
                <li>我是第4个li元素</li>
                <li>我是第5个li元素</li>
            </ul>
        </p>
    </p>
    <p class="bottom">
        <ul>
            <li>我是第1个li元素</li>
            <li>我是第2个li元素</li>
            <li>我是第3个li元素</li>
            <li>我是第4个li元素</li>
            <li>我是第5个li元素</li>
        </ul>
    </p>
</p>

로그인 후 복사

테이블 셀을 사용하여 하단 정렬을 달성하는 것이 현재 마지막 해결 방법이며 다음과도 호환됩니다. 즉8. 하단 정렬 문제가 해결되었습니다. "스크롤 막대를 아래쪽으로 당겨야 합니다"라는 문제는 테이블 셀을 사용하여 구현할 수 없습니다. 이를 제어하기 위해 js를 사용할 수밖에 없습니다. 방법~#🎜🎜 #CSS 테이블과 테이블-셀 레이아웃은 다양한 특수 효과를 얻을 수 있습니다. 자세한 내용은 내가 아는 Zhang Xinxu의 여러 디스플레이를 참조하세요. 테이블-셀 애플리케이션

요약: 이상이 이 글의 전체 내용이며, 모든 분들의 공부에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면

CSS 비디오 튜토리얼

을 방문하세요!