CSS에서이 레이아웃을 만드는 방법은 무엇입니까?

This layout CSS에서이 레이아웃을 만드는 방법은 무엇입니까?

이름을 지정하는 방법조차 모른다. "유체"또는 "액체"열은 간단한 동적 높이를 나타냅니다. 나는 이것을 하나 만들었고 두 가지 질문을했다 : 원시 HTML5/CSS3로 할 수 있는가? 그것은 3, 4, ..., n 개의 열에서 작동하도록 할 수 있습니까?!

출처

2013-06-20 Erik Escobedo

예. 원시 HTML5/CSS3을 사용하여이를 수행 할 수 있습니다. – Ani

도움이 될만한 것들을 찾으실 수 있습니다 - http://mcpants.github.io/jquery.shapeshift/ – CodeMoose

난 당신이 당신이 Masonry을 사용할 수 있습니다 this
같은 것을 달성하고자하는 것을 이해 - 자바 스크립트 & 순수 또한 jQuery를 플러그인입니다 jQuery를
또는 Isotope 지원합니다.
이 플러그인의 저자는 Isotope을 사용하도록 제안합니다.

출처

2013-06-20 21:30:19 VenomVendor

대단히 고마워요! 이것이 내가 필요한 것입니다. 단지 호기심에 의해서, 맨손의 CSS로 동일한 효과 (물론 애니메이션없이)를 얻을 수 있습니까? –

아니요, CSS만으로는 불가능합니다. [레이아웃 모드 :] (http://isotope.metafizzy.co/docs/introduction.html)를 보면 거기에 설명되어 있습니다. [데모] (http://isotope.metafizzy.co/)에서 브라우저의 크기를'showall, original, mansory'로 바꾸면 틈을 발견 할 수 있습니다. 실제로는 jQuery를 사용하는 레이아웃 모드로 제거됩니다. – VenomVendor

모든 읽기 상자의 높이를 설정하는 방법에 따라 다릅니다. 내용에 따라 다르면 유체 너비가있는 단지 2 열 레이아웃입니다. 너비와 높이의 비율을 유지하는 경우 js를 사용하여 수학을 수행하고 높이를 유지하거나 배경에 img를 사용하여 width:100%; height:auto; display:block 콘텐츠의 상단에 콘텐츠 position:absolute:을 배치해야합니다.

출처

2013-06-20 21:21:13

CSS에서이 레이아웃을 만드는 방법은 무엇입니까?

답변

관련 문제