CSS 레이아웃의 양쪽 끝에 레이아웃 구현

최근 개발 과정에서 양쪽 끝이 정렬되어 백분율에 따라 배치되는 레이아웃을 만났습니다. 이전에 Flex 레이아웃을 사용했는데, Flex 레이아웃을 사용하면 양쪽 끝을 사용할 때 모든 버그가 나타납니다. . 예를 들어 다음이 동적으로 생성되면 3개 이상의 열이 다음 목록을 양쪽에 배포합니다.
풀 수는 있지만 일반 CSS를 사용하여 어떻게 배치되는지 보고 싶습니다. 왜냐하면 내가 이것을 썼기 때문이다.

인터넷에서 몇 가지 튜토리얼을 찾았는데, 모두 하드 코딩된 너비로 작동합니다. 백분율 형식으로 바꿔서 간단하게 기록해봤습니다.
먼저 css

<style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        
        .max-box {
            max-width: 1200px;
            margin: 0px auto;
        }
        
        .box {
            overflow: hidden;
            width: calc(100% + 20px);
            margin-left: -10px;
        }
        
        .inner {
            height: 100px;
            border: solid 1px red;
            float: left;
            margin-left: 10px;
            width: calc(((100% - 20px) - 10px * 3) / 4);
        }
        
        .max-box2 {
            max-width: 1200px;
            margin: 50px auto;
            border: solid 1px red;
            height: 200px;
        }
    </style>

를 추가한 뒤 html

 <p class="max-box2">

    </p>
    <p class="max-box">
        <p class="box">
            <p class="inner">

            </p>
            <p class="inner">

            </p>
            <p class="inner">

            </p>
            <p class="inner">

            </p>
        </p>
    </p>

을 추가하고 이를 html에 넣으면 효과를 볼 수 있습니다.
아래와 같이

마지막으로 공식을 요약합니다

x = 10px; 即：想要的间距
y = 4     即：想要排列的个数
父级：  width: calc(100% + (x * 2));
子级：  width: calc(((100% - (x * 2)) - x * ( y - 1)) / y );

추천 튜토리얼: "CSS Tutorial"

위 내용은 CSS 레이아웃의 양쪽 끝에 레이아웃 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!