CSS 고급 float/grid 레이아웃

CSS의 격자 레이아웃에 조금 어긋납니다. 래퍼 (1000px 너비)를 가지고 div30을 float:left; 및 23px에서 각각 여백을 넣고 싶습니다. 선택자 :nth-child을 사용하면 쉽게 달성 할 수 있습니다. 하지만 지금은 왼쪽 상단 모서리에 높이가 가변이고 그리드 항목의 수는 가변적 인 텍스트 블록이 있습니다.CSS 고급 float/grid 레이아웃

그래서 텍스트 블록의 right-margin과 그리드 항목을 23px로 설정했습니다. 그러나 가장 오른쪽 모눈 요소가 23px right-margin이면 다음 줄로 나뉩니다.

모르겠으니 여기서는 nth-child을 사용할 수 없습니다. 두 항목의 행 수는 얼마나되며, 세 항목 중 몇 개가 나올지 알 수 없습니다.

내 문제의 CSS 전용 솔루션이 있기를 바랍니다.

+-------------------------------------------+ 
|+---------------+ +----------+ +----------+| 
||    | |   | |   || 
||    | |   | |   || 
||    | |   | |   || 
||    | +----------+ +----------+| 
|| Textblock | +----------+ +----------+| 
||    | |   | |   || 
||    | |   | |   || 
||    | |   | |   || 
|+---------------+ +----------+ +----------+| 
|+----------+ ^  ^   ^| 
||   | (margin)  (margin) (no margin) 
||   |        | 
||   |        | 
|+----------+        | 
+-------------------------------------------+ 
^ 
(no margin)

출처

2013-06-09 Julian F. Weinert

시도한 코드를 공유 할 수 있습니까? –

텍스트 컨테이너에서'min-height' 또는'max-height'를'overflow-y'와 함께 사용할 수 있습니다. – Dom

죄송합니다. 바이올린 링크를 잊어 버렸습니다. 내 업데이트를 참조하십시오. –

당신은 이런 일을 할 수있는 : 여기

jsfiddle.net는 어떻게해야 내 레이아웃입니다 : 여기에 UPDATE

내가 만든 시도를 보여주는 바이올린입니다 : http://codepen.io/pageaffairs/pen/svxLg

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .float, .boxes div {background: #f7f7f7; } .wrap {width: 1000px; margin: 0 auto; padding: 20px 0; background: #30353b;} .float {float: left; width: 476px; height: 440px; margin: 0 23px 23px 0;} .boxes {text-align: justify;} .boxes div {width: 238px; height: 238px; display: inline-block;} .boxes:after {content: ''; width: 100%; display: inline-block;} </style> </head> <body> <div class="wrap"> <div class="float"></div> <div class="boxes"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .float {background: #ccc;} .boxes div {background: #f7f7f7; } .wrap {width: 1000px; margin: 0 auto; padding: 20px 0; background: #30353b;} .float {float: left; width: 318px; height: 400px; margin: 0 23px 23px 0;} .boxes {text-align: justify;} .boxes div {width: 318px; height: 200px; margin-bottom: 23px; display: inline-block;} .boxes:after {content: ''; width: 100%; display: inline-block;} </style> </head> <body> <div class="wrap"> <div class="float"></div> <div class="boxes"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> </html>

편집 : 여기 http://www.barrelny.com/blog/text-align-justify-and-rwd/

서로 다른 크기와 다른 버전입니다 :
나는 text-align: justify에 inline-block 요소의 설정이 매우 편리 트릭을 인용 한 다른 날, 다른 conversation에서 부분적으로이 솔루션을 가지고 I 지금 예제를 게시 했으므로 코드에 적용된 예제는 다음과 같습니다.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #main { width:1000px; position:relative; background-color:rgb(88, 88, 88); } #welcometext { float: left; width:318px; margin-right:23px; } #welcometext p { width:100%; margin-top:30px; } .navelement { width:318px; height:189px; overflow:hidden; margin-top:40px; border-radius:10px; background-color:white; display: inline-block; } .nav-wrap {text-align: justify;} .nav-wrap:after {content: ''; width: 100%; display: inline-block;} </style> </head> <body> <div id="main"> <div id="welcometext"> <p>aximinctus incte pa idis sequati velit exero to tem si disci- enderi doloressit odi reptatum dolorrum et et autet aliti- assi rerio corum hitius am quidelibus. 318 px giatemporro esequam, eicias arum doleni vidis pre pa do- lupti orerum qui doluptatiam, voluptae conseritaque sita [...] imuscimin ne niendit.</p> </div> <div class="nav-wrap"> <div class="navelement"> </div> <div class="navelement"> </div> <div class="navelement"> </div> </div> </div> </body> </html>

출처

2013-06-09 14:21:07

와우! 대단한 대답! 유일한 문제는 마지막 행에 두 개의 요소가있는 경우 왼쪽/오른쪽으로 정렬되고 고정된다는 것입니다. 링크의 기사 작성자는 자리 표시자를 사용했습니다. 그러나 콘텐츠는 CMS에서 제공되기 때문에 콘텐츠에 아무런 영향을 미치지 않습니다. –

흠. 나는 JS를 사용하여 상자 수를 계산하고 필요에 따라 여분의 자리 표시자를 추가 할 수 있다고 생각합니다. –

오케이 ... 그래서 더 나은 해결책이 없다는 것을 알았습니다. CMS에 연결하려고합니다. 나는 요소의 수를 얻는 방법이있을 것이라고 확신한다. 다시 한 번 고마워, 잘 했어! –

CSS 고급 float/grid 레이아웃

답변

관련 문제