어떻게 여러 개의div수준을 고르게 배열하고 양쪽을 벽에 붙이는 것을 실현할 것인가

어떻게 여러 개의div수준을 고르게 배열하고 양쪽 끝을 벽에 붙이는 것을 실현할 수 있습니까? 웹 페이지 레이아웃에서 자주 이런 수요가 있습니다. 바로 몇 개의div수준이 한 상자에 고르게 배열되고 양쪽 끝의div 바깥쪽이 상자 안쪽 벽에 바짝 붙는 것입니다. 아래 그림과 같습니다. 다음은 코드 실례를 보십시오.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>    </title>
<style type="text/css"> 
.parent{ 
  width:480px; 
  height:100px; 
  border:1px solid red; 
  overflow:hidden; 
} 
.parent div{ 
  width:100px; 
  height:100px; 
  background-color:green; 
  margin-left:20px; 
  float:left; 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
</div> 
</body> 
</html>

위의 코드는 고르게 분포되어 있지만 왼쪽은 바깥쪽 간격 때문에 부모 요소의 내벽에 붙일 수 없고 우리의 효과를 만족시킬 수 없습니다. 코드 수정은 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>    </title>
<style type="text/css"> 
.parent{ 
  width:460px; 
  height:100px; 
  border:1px solid red; 
  overflow:hidden; 
} 
.wrap{ 
  width:480px; 
  height:100px; 
  overflow:hidden 
} 
.parent .wrap div{ 
  width:100px; 
  height:100px; 
  background-color:green; 
  margin-right:20px; 
  float:right; 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
<div class="wrap"> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
</div> 
</div> 
</body> 
</html>

위 코드는 원하는 효과를 실현했습니다.방법은 수평으로 배열된div의 바깥쪽에 div를 하나 더 끼워 넣고 이div의 폭을 480px로 설정하면 수평으로 배열된div가 줄을 바꾸지 않는다.가장 바깥쪽의div 설정 폭은 460이고 오버플로우 속성 값을hidden으로 설정하면 오른쪽의margin-right 구역을 숨길 수 있어 우리가 원하는 효과를 실현할 수 있습니다.
원래 주소:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/501.html

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

🧙🏼 HTML 구조를 나타내는 요소

: 컨텐츠 분할 요소 : 블록 레벨 요소 : 플로우 콘텐츠를 위한 통용 컨테이너 (순수 컨테이너로서 아무것도 표현안함) : 인라인 컨테이너 : 인라인 레벨 요소 🌵 span (인라인 요소) vs div(블록 요소) ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

어떻게 여러 개의div수준을 고르게 배열하고 양쪽을 벽에 붙이는 것을 실현할 것인가

좋은 웹페이지 즐겨찾기