- display: inline-block, float: left 를 준 요소는 왼쪽에서 오른쪽으로 배치된다.
- display: inline-block;과 float: left;를 동시에 준 경우는 float: left;만 준 경우와 거의 비슷하게 나타남.
html은
<ul>
<li> 1번 </li>
<li> 2번 </li>
</ul>
css는
ul li{
float: left; }
/* display: inline-block;만 줘도 동일하게 됨. */
- float: right 를 준 요소는 오른쪽에서 왼쪽으로 배치된다.
css는
ul li { float: right; }
여러줄로 표시하는 경우
- 감싸고 있는 공간이 좁으면 float를 주거나 inline-block을 준 요소는 자동으로 아래줄로 내려간다.
css는
ul{width: 300px;}
ul li{float: left;} /* display: inline-block;만 줘도 동일하게 됨. */
- 각 요소의 길이 값이 다르고, 두세줄로 나타나는 경우 줄바뀌어서 나타나는 요소가 왼쪽으로 나타나지 않는 경우가 있다.
- 예를 들어 2개씩 한줄에 나타나는데 1번째 요소가 높이가 길면 3번째 요소가 1번째 요소의 오른쪽 하단에 배치된다.
css는
ul{width: 300px;}
ul li{float: left;}
해결방법
ul li:nth-child(3) {clear: left;}
/* li중에 3번째 요소에 clear:left를 주면 왼쪽에 다른 요소가 오지 못하게 한다. */
좌우로 배치되는 요소의 넓이 제어하기
- 좌우로 배치되는 컨텐츠가 짧다면 넓이를 제어하지 않아도 display: inline-block;이나 float: left;를 주면 콘텐츠가 존재하는 만큼 넓이가 결정된다.
css는
ul li{ display: inline-block;} /* float: left;만 줘도 동일하게 됨. */
- 좌우로 배치될 콘텐츠의 가로 길이가 길면 넓이를 제어하지 않을시 display: inline-block;이나 float: left;를 줘도 좌우로 배치되지 않는다.
-
기업가 정신
기업가는 문제 해결을 위해 노력하고 답을 찾아내는 사람입니다. 옐로모바일은 이러한 기업가 정신으로 새로운 문제에 도전하고 세상을 개선해 나갈 것입니다.
-
협업
전통 산업 시대 1+1은 2였지만, 모바일 시대 1+1은 11 이상의 가치를 만들어 냅니다. 옐로모바일은 젊고 강한 기업들의 협업을 통해 새로운 시너지와 도약을 일궈 내겠습니다.
li의 넓이를 제어한 후
-
기업가 정신
기업가는 문제 해결을 위해 노력하고 답을 찾아내는 사람입니다. 옐로모바일은 이러한 기업가 정신으로 새로운 문제에 도전하고 세상을 개선해 나갈 것입니다.
-
협업
전통 산업 시대 1+1은 2였지만, 모바일 시대 1+1은 11 이상의 가치를 만들어 냅니다. 옐로모바일은 젊고 강한 기업들의 협업을 통해 새로운 시너지와 도약을 일궈 내겠습니다.
html은
<ul>
<li>
<h3>기업가 정신</h3>
<p>기업가는 문제 해결을 위해 노력하고 답을 찾아내는 사람입니다. 옐로모바일은 이러한 기업가 정신으로 새로운 문제에 도전하고 세상을 개선해 나갈 것입니다.</p>
</li>
<li>
<h3>협업</h3>
<p>전통 산업 시대 1+1은 2였지만, 모바일 시대 1+1은 11 이상의 가치를 만들어 냅니다. 옐로모바일은 젊고 강한 기업들의 협업을 통해 새로운 시너지와 도약을 일궈 내겠습니다.</p>
</li>
</ul>
css는
ul li{
display: inline-block;}
/* 문장이 길어서 li요소가 inline 요소로 변경되어도 좌우로 배치되지 않음 */
해결방법
ul li{
display: inline-block;
width: 100px;
}
/* li의 넓이를 제어하여 좌우로 배치되게 함. 절대 긴 문장을 <br />로 줄바꿈해서 좌우로 배치되게 하지마세요. */