몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제

이 시리즈는 몇 가지 흥미로운 CSS 주제를 논의하는 첫 번째 시리즈이며, 일부 주제는 문제 해결을 위한 아이디어를 넓히기 위해 고안되었습니다. 또한 쉽게 간과할 수 있는 몇 가지 CSS 세부 사항도 포함합니다.

문제 해결 시 호환성은 고려되지 않습니다. 질문이 거칠고 제약이 없습니다. 문제 해결에서 익숙하지 않다고 생각되는 CSS 속성이 있으면 빨리 공부하세요. .

계속 업데이트하고, 계속 업데이트하고, 계속 업데이트하고, 중요한 것을 세 번 말하세요.

흥미로운 CSS 주제에 대해 이야기해 보세요(1)-왼쪽에 수직 막대를 구현하는 방법

흥미로운 CSS 주제에 대해 이야기하기(2) - 줄무늬 테두리 구현에서 상자 모델에 대해 이야기하기

흥미로운 CSS 주제에 대해 이야기해 보세요(3) - 스택 순서와 스택 컨텍스트에 대해 얼마나 알고 있나요

흥미로운 CSS 주제에 대해 이야기하기(4) - 반사부터 시작하여 CSS 상속에 대해 이야기

흥미로운 CSS 주제에 대해 이야기하기(5)-한 줄을 중앙에 배치하고, 두 줄을 중앙에 배치하고, 두 줄 이상을 생략합니다

모든 주제는 내 Github에 요약되어 있습니다.

6. 다단 균일 레이아웃 문제

다음과 같은 다중 열 균일 레이아웃을 달성하는 방법(그림의 직선은 컨테이너 너비를 표시하기 위해 포함되지 않음):

방법 1: display:flex

CSS3 유연한 상자(Flexible Box 또는 Flexbox)는 페이지가 다양한 화면 크기와 장치 유형에 적응해야 할 때 요소가 더 적절한 정렬 동작을 갖도록 보장할 수 있는 레이아웃 방법입니다.

물론 모바일 애플리케이션에는 flex 레이아웃이 좋습니다. PC가 완벽하게 호환되어야 한다면 호환성이 충분하지 않으므로 여기에서는 생략하겠습니다.

방법 2: 의사 요소 및 text-align:몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제

사용

은 다음과 같이 정의됩니다. HTML 스타일:

<div class="container">
    <div class="몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </div>
</div>

우리는 양쪽 끝에서 텍스트를 정렬하는 효과를 얻을 수 있는 text-align:몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제가 있다는 것을 알고 있습니다.

text-align CSS 속성은 인라인 콘텐츠(예: 텍스트)가 블록 상위 요소를 기준으로 정렬되는 방식을 정의합니다. text-align은 블록 요소 자체의 정렬을 제어하지 않고 인라인 콘텐츠의 정렬만 제어합니다.

text-align:몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제은 텍스트가 양쪽에 정렬된다는 의미입니다.

처음에는 다음 CSS를 사용하여 구현할 수 있다고 생각했습니다.

.몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제{
  text-align: 몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제;
}

.몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제 i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}

结果如下：

 

Demo戳我

没有得到意料之中的结果，并没有实现所谓的两端对齐，查找原因，在 W3C 找到这样一段解释:

最后一个水平对齐属性是 몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제，它会带来自己的一些问题。CSS 中没有说明如何处理连字符，因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则，而是干脆不提这个问题。

额，我看完上面一大段解释还是没明白上面意思，再继续查证，才找到原因：

虽然 text-align:몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제 属性是全兼容的，但是要使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用。

也就是说每一个 1 间隙，至少需要有一个空格或者换行或者制表符才行。

好的，我们尝试一下更新一下 HTML 结构，采用同样的 CSS：

<div class="container">
    <div class="몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제">
        <i>1</i>

        <i>2</i>

        <i>3</i>

        <i>4</i>

        <i>5</i>

    </div>
</div>

尝试给每一块中间添加一个换行符，结果如下：

Demo戳我

啊哦，还是不行啊。

再寻找原因，原来是出在最后一个元素上面，然后我找到了 text-align-last 这个属性，text-align-last属性规定如何对齐文本的最后一行，并且 text-align-last 属性只有在 text-align 属性设置为 몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제 时才起作用。

尝试给容器添加 text-align-last:몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제：

.몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제{
  text-align: 몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제;
  text-align-last: 몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제; // 新增这一行
}

.몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제 i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}

发现终于可以了，实现了몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제：

Demo戳我

结束了？没有，查看一下 text-align-last 的兼容性：

但是一看兼容性，惨不忍睹，只有 IE8+ 和 最新的 chrome 支持 text-align-last 属性，也就是说，如果你不是在使用 IE8+ 或者 最新版的 chrome 观看本文，上面 Demo 里的打开的 codePen 例子还是没有均匀分布。

上面说了要使用 text-align:몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제 实现多列布局，要配合 text-align-last ，但是它的兼容性又不好，真的没办法了么，其实还是有的，使用伪元素配合，不需要 text-align-last 属性。

我们给 class="몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제" 的 div 添加一个伪元素：

.몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제{
  text-align: 몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제;
}

.몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제 i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}

.몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 100%;
}

text-align-last: 몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제을 제거하고 의사 요소를 추가하면 효과는 다음과 같습니다.

데모 찔러보니 여러 열이 균등하게 배치되어 있습니다

의사 요소 :after inline-block의 100% 너비를 설정하고 컨테이너의 text-align: 몇 가지 흥미로운 CSS 문제(6)에 대해 이야기해 보겠습니다. – 완벽하게 호환되는 다중 열 균일 레이아웃 문제을 일치시키면 여러 열의 균일한 레이아웃을 쉽게 얻을 수 있습니다. 몇 가지 해킹 코드만 더 추가하면 IE6+와 호환될 수 있습니다. 가장 중요한 것은 코드가 길지 않고 이해하기 쉽다는 것입니다.

문제의 최종 구현은 초기 단계와 같습니다.

데모를 찔러보니 여러 열이 고르게 배치되어 있습니다

이 방법은 원래 블로거의 동의를 받아 이 시리즈에 작성된 것입니다.

• 너무 많이 생각하지 마시고 양쪽 끝을 맞춰주시면 됩니다

모든 주제는 내 Github에 요약되어 있으며 더 많은 교류가 있기를 바라며 블로그에 게시되었습니다.

아직 궁금한 점이나 제안사항이 있으면 더 많은 의견을 보내주시면 됩니다. 글의 내용이 제한되어 있고 잘못된 내용이 있는 경우. 기사로 알려주세요.