다른 DIV의 내용에 DIV 폭, 모두 부동 및 센터링

나는 초기 상태가 나에게 단순 해 보이지만 그렇지 않다는 것을 알리고 싶습니다.다른 DIV의 내용에 DIV 폭, 모두 부동 및 센터링

내 코드입니다 : 내가 좀하고 싶습니다 것은

<html> 
<head> 
<style> 
div { 
border-top: 1px solid black; 
margin: 10px; 
} 
div#all { 
border: 0; 
} 
</style> 
<body> 
<div id=all> 
<div class=first>First</div> 
<div class=rowstarter>Row Starter</div> 
<div class=content>Content</div> 
<div class=content>Content</div> 
<div class=content>Content</div> 
<div class=content>Content</div> 
<div class=content>Content</div> 
<div class=rowstarter>Row Starter</div> 
<div class=content>Content</div> 
<div class=content>Content</div> 
<div class=rowstarter>Row Starter</div> 
<div class=content>Content</div> 
<div class=content>Content</div> 
<div class=content>Content</div> 
<div class=content>Content</div> 
</div> 
</body> 
</html>

"내용"클래스의 모든 된 DIV가 왼쪽에서 오른쪽으로 잇달아 설정 인라인 블록 (또는 수레)입니다.

"rowstarter"클래스는 동일하지만 이전 수식을 지워야합니다 (새 행 시작).

"첫 번째"DIV의 너비는 아래 내용과 동일해야합니다 (따라서 브라우저 너비가 브라우저에 5 개의 "내용"DIV를 표시 할 수있게하려면 100px 너비의 "첫 번째"는 5 * 100px + 5 * (2 * 10px [여백]) = 6 "콘텐츠"DIV 다음 "처음"의 너비가 720px 인 경우 600px ...).

CSS 만 사용하면 Javascript를 사용하지 않고도이 작업을 수행 할 수 있습니까?

출처

2013-04-29 friedman

나는 당신이 의미하는 바를 얻지 못하지만, 당신을 도울 수 있다고 확신합니다. 이미지를 사용하여 시각화 할 수 있습니까? –

미안하지만 대답을 얻습니다. 시각화는 그것을 향상시킬 것이므로, 시간이 있다면 그것을 더하십시오. –

얼마나 많은 div가 있더라도 각 "행"은 100 % 넓이가되어야합니다. –

첫째, 당신은 .first, 왼쪽 부동 소수점을 제외하고 #all 각 자식 DIV, 을주고 있습니다

#all, #all div { float: left; } #all .first { float: none; }
다음
, 왼쪽에 .rowstarter 취소합니다.

#all .rowstarter { clear:left; }

당신은 실제로 모두의 "내용"클래스가 필요하지 않습니다 (나는 그것을 클러 코드로, 그것을 제거 추천 페이지 무게에 추가하는 것이다).

편집 : 당신은 .first DIV 앞에 .rowstarter 사업부를 추가하는 경우이 .rowstarter는 고정 폭과 너비와 .rowstarter의 마진의 합으로 증가 .first 요구의 왼쪽 여백을 가지고있다.
#all .rowstarter { width: 100px; // arbitrary fixed width margin: 10px; // you've given all divs inside #all this margin, just restating for emphasis } #all .rowstarter + .first { margin-left: 130px; // width of .rowstarter, plus its left and right margins and .first's original 10px left margin }

는 당신이, 다음의 CSS 트릭을 적용 래퍼를 추가해야 div#all의 중심을 달성하기 div의 동적 될 것입니다 내용의 수가

.wrapper { position: absolute; left: 50%; } #all { position: relative; left: -50%; }

출처

2013-04-29 15:37:36

음 ... 고맙습니다.하지만 작동하지 않습니다. 첫 번째는 그 아래의 가장 긴 행보다 넓기 때문에 그렇지 않습니다. 또한 "all"로 닫힌 콘텐츠는 페이지의 가운데에 있지 않습니다. 그것은 왼쪽에 붙어 있습니다. – friedman

사실, "처음"은 더 넓지 않습니다. 각 div에 10 픽셀의 여백을 설정했습니다. 요소를 검사하면 모든 여백을 계산할 때 "첫 번째"가 실제로 가장 넓은 행의 너비와 정확히 일치 함을 알 수 있습니다. 나를 믿지 않으면 여백을 제거하십시오. –

좋습니다, 아마도 잘못 설명했습니다. 눈에 보이는 "첫 번째"테두리는 아래 줄의 테두리 왼쪽에서 아래 가장 긴 줄의 마지막 DIV 테두리 오른쪽으로 이동해야합니다. 또한 전체 블록이 창 중앙에 배치되어야합니다. 이제는 왼쪽으로 붙어 있습니다. – friedman

아마도 귀하의 질문에 대한 답변을 제공하는 jsFiddle을 설정했습니다. 그것은 이제 폭을 포함하지만 당신은 당신이 지금 원하는 것을 자유롭게 사용할 수 있도록 추가 된 코드는 폭없이

http://jsfiddle.net/agtFw/3

html로 :

<div id="all"> 
<div class="first">First</div> 
<div class="content rowstarter">Row Starter</div> 
<div class="content">Content</div> 
<div class="content">Content</div> 
<div class="content">Content</div> 
<div class="content">Content</div> 
<div class="content">Content</div> 
<div class="content rowstarter">Row Starter</div> 
<div class="content">Content</div> 
<div class="content">Content</div> 
<div class="content rowstarter">Row Starter</div> 
<div class="content">Content</div> 
<div class="content">Content</div> 
<div class="content">Content</div> 
<div class="content">Content</div> 
</div>

는 2주는 아무 문제가 없다 div에 더 많은 클래스를 추가하면 때때로 도움이됩니다!

와 CSS : 나는 귀하의 질문에 대답을 생각 a fiddle을 게시 한

div { 
border-top: 1px solid black; 
margin: 10px; 
} 

div.content 
{ 
    float:left; 
} 

div.rowstarter 
{ 
    clear:left; 
} 

div#all { 
border: 0; 
}

출처

2013-04-29 15:04:10

너비와 관련된 요구 사항을 무시하므로 질문에 대답하지 않습니다. –

안녕하세요 닉! 고맙습니다.하지만 해결책의 일부일뿐입니다. 까다로운 부분은 모든 DIV를 중앙에 놓고 ("모두"라는 DIV로 끝난) "첫 번째"DIV의 올바른 너비를 얻으려고 할 때입니다. – friedman

당신은 그 일에 모두 맞습니다. jsFiddle이 이제 너의 필요에 맞게 100 % 너비로 –

을, 당신을 원하는 것을 얻기 위해 자바 스크립트를 사용해야합니다.자식 요소의 수를 기반으로 백분율 너비를 계산할 수있는 CSS는 없습니다.

당신이 div의 당신이 당신의 HTML을 생성하는 동안, 당신은 폭 여기

인라인 스타일을 추가 할 수 있습니다 각 행에 얼마나 많은 알고 있다면 자바 스크립트에 대한 대안이 될 몇 가지 예입니다

Pure css (needs html layout change)
jQuery

출처

2013-04-29 16:01:42 Pete

감사합니다, 피트. 이것은 일종의 해결책이지만 정확한 것은 아닙니다. 그것은 몇 가지 아이디어를 제공합니다. div의 콘텐츠 수를 알 수 없지만 가장 중요한 점은 div의 크기가 창의 너비에 따라 한 행에 몇 개인 지 알 수 없다는 것입니다. 그래서 우리는 6 'div를 가질 가능성이 있을지도 모르지만 그 행은 실제로 2 개의 subrows width 3'div로 나뉩니다. – friedman

각 div의 너비를 행 너비에 비례하는 동적으로 만들려고하지 않는 한 CSS로만이 작업을 수행 할 수 있습니다. –

다른 DIV의 내용에 DIV 폭, 모두 부동 및 센터링

답변

관련 문제