[css] div의 요소를 서로 균등하게 배포하는 방법은 무엇입니까?

Program / 글쓴이

이것은 메뉴를 의미합니다.
예를 들어 3 개의 스팬이있는 div 요소가 있는데 모두 여백, 최대 너비 및 부동 (왼쪽 또는 오른쪽)이 있습니다.
왼쪽에서 시작하여 다음과 같이 위치합니다.
[[span1][span2][span3] - lots of free space here].
이렇게 균일하게 만들고 싶습니다.
[[span1] - space - [span2] - space - [span3]]
CSS를 사용하여 어떻게 할 수 있습니까? 나는 그것이 가능하지 않다는 것을 다소 의심합니다.
메뉴 항목을 추가하거나 제거 할 때 동일한 스타일을 유지하고 싶습니다.
HTML :

<div id="menu">
    <span class="menuitem"></span>
    <span class="menuitem"></span>
    <span class="menuitem"></span>
</div>

CSS : 

#menu {
    ...
    width:800px;
}
.menuitem {
    display:block;
    float:left;
    margin-left:25px;
    position:relative;
    min-height:35px;
    max-width:125px;
    padding-bottom:10px;
    text-align:center;
}

답변

‘옛날’에는 테이블을 사용하고 메뉴 항목은 항목 수에 대한 너비를 명시 적으로 지정하지 않고도 균등 한 간격으로 배치됩니다.

IE 6 및 7이 아니었다면 (문제가되는 경우) CSS에서 동일한 작업을 수행 할 수 있습니다.

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

CSS :

div.demo {
    display: table;
    width: 100%;
    table-layout: fixed;    /* For cells of equal size */
}
div.demo span {
    display: table-cell;
    text-align: center;
}

항목 수를 조정할 필요가 없습니다.

없는 예 table-layout:fixed-셀이 전체 너비에 균등하게 분산되지만 너비가 내용에 따라 결정되기 때문에 크기가 같을 필요는 없습니다.

예제 table-layout:fixed-셀은 내용에 관계없이 동일한 크기입니다. (이 추가에 대한 의견에 @DavidHerse에게 감사드립니다.)

첫 번째와 마지막 메뉴 요소를 왼쪽과 오른쪽으로 맞추려면 다음 CSS를 추가 할 수 있습니다.

div.demo span:first-child {
    text-align: left;
}
div.demo span:last-child {
    text-align: right;
}

답변

정당화를 사용할 수 있습니다.

이것은 다른 답변과 비슷하지만 왼쪽과 오른쪽 요소가 균등 한 간격이 아닌 가장자리에 있다는 점을 제외하면 [.a..b..c. 대신 a … b … c.]

<div class="menu">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
.menu {text-align:justify;}
.menu:after { content:' '; display:inline-block; width: 100%; height: 0 }
.menu > span {display:inline-block} 
</style>

한 가지 문제점은 각 요소 사이에 공백을 두어야한다는 것입니다. [바이올린을보십시오.]

메뉴 항목을 인라인 블록으로 설정하는 데는 두 가지 이유가 있습니다.

  1. 요소가 기본적으로 블록 수준 항목 (예 <li>🙂 인 경우 동일한 행에 유지하려면 디스플레이를 인라인 또는 인라인 블록으로 설정해야합니다.
  2. 요소에 두 개 이상의 단어 ( <span>click here</span>)가있는 경우 인라인으로 설정하면 각 단어가 균등하게 배포되지만 인라인 블록으로 설정되면 요소 만 배포됩니다.

JSFiddle보기

편집 :
이제 flexbox 가 광범위하게 지원 되므로 (모든 비 IE 및 IE 10 이상) “더 나은 방법”이 있습니다.
위와 동일한 요소 구조를 가정 할 때 필요한 것은 다음과 같습니다.

<style>
    .menu { display: flex; justify-content: space-between; }
</style>

바깥 쪽 요소도 간격을두고 싶으면 공백 사이를 공백으로 전환하면됩니다.
JSFiddle보기

답변

누군가 약간 다른 접근 방식을 시도하고 싶다면 FLEX를 사용할 수 있습니다.

HTML

<div class="test">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

CSS

.test {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.test > div {
    margin-top: 10px;
    padding: 20px;
    background-color: #FF0000;
}

여기에 바이올린이 있습니다 : http://jsfiddle.net/ynemh3c2/ (div를 추가 / 제거해보십시오)

여기에 대해 배웠습니다 : https://css-tricks.com/snippets/css/a-guide- to-flexbox /

답변

justify-content: space-between그리고 display: flex우리가 필요한 모든 것이지만 영감을 주신 @Pratul에게 감사드립니다!

답변

이것은 그것을하는 빠르고 쉬운 방법입니다

<div>
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

CSS

div{
    width:100%;
}
span{
    display:inline-block;
    width:33%;
    text-align:center;
}

그런 다음 가지고있는 숫자 width에 대한 spans를 조정하십시오 .

예 : http://jsfiddle.net/jasongennaro/wvJxD/

답변

다음과 #menu같이 플렉스 컨테이너 로 id가있는 div를 표시하면 됩니다.

#menu{
    width: 800px;
    display: flex;
    justify-content: space-between;
}

답변

다음 CSS 조합으로 관리했습니다.

text-align: justify;
text-align-last: justify;
text-justify: inter-word;