더 나은 레이아웃을 위해 이미지 공간 및 캡션 제공

이미지를 항상 한쪽으로 이동시키고 "flatright"와 같은 클래스를 제공하고 다음과 같이 선언하는 것만으로도 약간의 여유를 줄 수 있습니다.

.floatright {
  float: right;
  margin: 5px;
}

좋습니다. 하지만 좀 더 제어력을 높이고 이미지에 캡션을 추가할 수 있도록 상황을 좀 바꿔보죠. 이는 웹 기사에 멋진 터치와 보다 전문적인 레이아웃 느낌을 더합니다.

이미지에 클래스를 제공하는 대신, div 안에 넣고 div에 클래스를 지정합니다. div 안에 이미지 및 캡션을 포함합니다.

<div class="rightside_image">
    <img src="egg.jpg" alt="egg" />
        <p>Stop-motion image of an<br />egg getting sliced in half.</p>
</div>

그런 다음 CSS에 해당 클래스를 선언합니다.

div.rightside_image {
  float: right;
  padding: 10px;
  margin: 10px;
  border: 2px solid #cccccc;
  text-align: center;
  font-size: 0.8em;
  font-style: italic;
}

그런 다음 이 선언을 복사하고 변경하여 왼쪽 유동 이미지, 가운데 이미지, 다른 배경색 등과 같은 다양한 변형을 만들 수 있습니다.

[라이브 예시]

[다운로드 예제]