CSS : 완전히 새로운 행을 수행하도록 float 강제

CSS : 완전히 새로운 행을 수행하도록 float 강제

---

나는 많은 float: left요소를 가지고 있으며 일부는 다른 요소보다 약간 큽니다. 줄 바꿈이 끊어지고 이미지가 더 큰 요소에 갇히지 않고 왼쪽 끝까지 뜨도록하고 싶습니다.

내가 말하는 페이지는 다음과 같습니다. 링크

아름답게 작동하면 모두 같은 크기라면 : 링크

감사! (필요하지 않은 경우 자바 스크립트 또는 서버 측 스크립팅을 사용하지 않을 것입니다)

---

실제로 float선언 을 사용해야 하는 경우 두 가지 옵션이 있습니다.

1. 를 사용하여 clear: left가장 왼쪽에있는 항목에 대한이 - 죄수는 열 고정 된 수있을 것이다 것입니다
2. height스크립트 또는 CSS의 높이를 하드 코딩 하여 항목을 동일하게 만듭니다.

이 두 가지 모두 플로트가 작동하는 방식을 중심으로 작동하기 때문에 제한적입니다. 그러나 display: inline-block대신 float유사한 레이아웃을 얻을 수있는를 사용할 수도 있습니다 . 그런 다음을 사용하여 정렬을 조정할 수 있습니다 vertical-align.

---

제거 float:left하고 display:inline-block대신 추가하여 수정했습니다 . 이미지에 사용하지는 않았지만 거기에서도 잘 작동합니다.

---

사용하다 display:inline-block

찾 vertical-align: top거나 vertical-align:middle유용 할 수도 있습니다 .

---

이것이 내가 한 일입니다. 새로운 라인을 강요하는 것처럼 보이지만, 나는 어떤 방식으로도 html / css 전문가가 아닙니다.

<p>&nbsp;</p>

---

그것들을 div로 감싸고 div에 설정된 너비 (가장 넓은 이미지의 너비 + 여백)를 지정한 다음 div를 플로팅 할 수 있습니다. 그런 다음 이미지를 포함하는 div의 중앙에 설정합니다. 이미지 사이의 여백은 크기가 다른 이미지에 대해 일관되지 않지만 페이지에 훨씬 더 멋지게 배치됩니다.

---

이것은 오래된 게시물이며 링크는 더 이상 유효하지 않지만 검색 초기에 나타났기 때문에 다른 사람들이 문제를 더 잘 이해할 수 있도록 의견을 말해야한다고 생각했습니다.

float를 사용하면 브라우저가 컨트롤을 자동으로 정렬하도록 요청합니다. 컨트롤이 지정된 플로트 배열의 너비에 맞지 않을 때 래핑하여 응답합니다. float : left, float : right 또는 clear : left, clear : right, clear : both.

따라서 한 묶음의 float : left 항목을 하나의 왼쪽 열에 균일하게 부동하게하려면 브라우저가 동일한 너비로 래핑 / 랩핑 해제하도록 결정해야합니다. 스크립팅을 수행하고 싶지 않기 때문에 단일 div에서 함께 떠 다니고 싶은 모든 컨트롤을 래핑 할 수 있습니다. 다음과 같은 클래스로 새 래핑 div를 추가하고 싶습니다.

.LeftImages{
    float:left;
}

HTML

<div class="LeftImages">   
  <img...>   
  <img...> 
</div>

이 div는 가장 큰 이미지의 너비에 맞게 자동으로 조정되며 모든 이미지는 항상 div와 함께 왼쪽으로 떠있게됩니다 (랩핑 없음).

그래도 래핑하려면 div에 width : 30 %와 같은 너비를 지정하고 각 이미지에 float : left; 스타일. 가장 큰 이미지로 조정하는 대신 크기가 다양하고 포함 된 이미지를 래핑 할 수 있습니다.

---

에 추가하면 .icons div {width:160px; height:130px;}아주 잘 작동합니다.

도움이되기를 바랍니다.

참고 URL : https://stackoverflow.com/questions/1476473/css-force-float-to-do-a-whole-new-line