부인 성명
부동 요소 옆에있는 목록은 문제를 일으 킵니다. 제 생각에는 이러한 종류의 플로팅 문제를 방지하는 가장 좋은 방법은 콘텐츠와 교차하는 플로팅 이미지를 피하는 것입니다. 반응 형 디자인을 지원해야 할 때도 도움이됩니다.
단락 사이에 이미지를 중앙에 배치하는 단순한 디자인은 너무 매력적으로 보이기보다 매우 매력적으로 보이고 지원하기가 훨씬 쉽습니다. 또한 한 걸음 떨어져 있습니다 <figure>.
그러나 나는 정말로 떠 다니는 이미지를 원합니다!
자, 만약 당신 이이 길을 계속할 정도로 열심 이라면 , 몇 가지 기술을 사용할 수 있습니다.
가장 간단한 방법은 목록을 사용 overflow: hidden하거나 overflow: scroll목록을 본질적으로 축소 포장하여 패딩을 유용한 위치로 끌어 올리는 것입니다.
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
이 기술에는 몇 가지 문제가 있습니다. 목록이 길어지면 실제로 이미지를 감싸지 않으므로 이미지 사용의 전체 목적을 거의 능가합니다 float.
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
그러나 나는 정말로 목록을 래핑하고 싶다!
좋아, 만약 당신이 더 더 영리하고 더 길을 따라 가야 한다면 ,리스트 아이템을 감싸고 글 머리 기호를 유지하는 데 사용할 수있는 또 다른 기술이 있습니다.
대신 패딩의 <ul>하고 (이것은 결코 수행 할 것 같다) 총알 잘 행동하려고 노력은 멀리 그 총알을 <ul>하고 그들을 제공 <li>의. 총알은 위험하며 그에 대한 <ul>책임은 없습니다.
img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
이 줄 바꿈 동작은 복잡한 내용에 이상한 일을 할 수 있으므로 기본적으로 추가하지 않는 것이 좋습니다. 재정의해야하는 것이 아니라 선택할 수있는 것으로 설정하는 것이 훨씬 쉽습니다.
