높이 맞춤 100 % 정당화 된 인라인 블록 div의

여러 개의 열과 행에 분산시키려는 동적 상자가있는 페이지가 있습니다. 상자의높이 맞춤 100 % 정당화 된 인라인 블록 div의

콘텐츠 높이 차이가 있지만, 나는 시각적 모양에 같은 높이가 하나의 '라인'의 모든 사업부의의를 원하는 :

나는 다음과 같은 소원을 가지고있다. 테두리와 배경색이 있습니다.
페이지가 응답하도록처럼 열 수 브라우저 폭을 조정해야하므로, 폭 페이지

이상적으로 I'dd을 통해 열을 정당화하고자 I'dd. 그러나 많은 예제를 읽고보고 난 후에 이것이 행 div가 항상 필요하기 때문에 이것이 정당화와 결합하여 어떻게 가능한지 보지 못합니다.

그래서 고정 된 수의 열을 사용할 것입니다. 예 모든 종류의 난이 솔루션에 온,하지만 하나의 문제는 여전히 존재 :

http://jsfiddle.net/johannesklapwijk/BQJ6A/

HTML :

<div class='row'> 
    <div class='cell'>a<br/>b</div> 
    <div class='cell'>a<br/>b<br/>c</div> 
    <div class='cell'>a<br/>b</div> 
    <span class='stretch'/> 
</div>

CSS :

각 사업부를 점점 높이가 동일하기

.row { 
    text-align: justify; 
    border: 1px solid red; 
    padding: 0; 
} 
.cell { 
    display: inline-block; 
    width:30%; 
    height: 100%; /* does not get the height of the parent div */ 
    border: 1px solid black; 
    background-color: green; 
} 

.stretch { 
    width: 100%; 
    display: inline-block; 
    font-size: 0; 
    line-height: 0 
}

나는 두 가지 질문이 있다고 생각합니다.

첫 번째 질문은 다른 해결책을 더 이상 쓸모 없게 만들 수 있습니다. 예를 들어 jQuery를 사용하면 브라우저 폭을 기반으로하는 div의 동적 격자를 실제로 만들 수 있습니다.
그렇지 않은 경우 높이 문제를 해결할 수 있습니까?

고마워요!

출처

2013-10-15 Johannes Klapwijk

이렇게 하시겠습니까?

<div class="con"> 
    <div class="col">asd</div> 
    <div class="col">asdasdasd 
     <br />asdas 
     <br />asdasd 
     <br />asdasd 
     <br />asdasd</div> 
    <div class="col">asd</div> 
</div>

CSS

.con { 
    height: 100%; 
    width: 400px; 
    display: table; 
    table-layout: fixed; 
} 
.col { 
    display: table-cell; 
    border: #000000 solid 1px; 
}

DEMO HERE

그리고 위해 :

HTML을 (당신이 그것을 브라우저의 크기를 원하는 경우 100 %로 사기 폭을 변경) 원하는 경우 브라우저 크기를 width으로 변경하십시오 ().

width: 100%;

DEMO HERE

당신은 당신이 DEMO HERE

출처

2013-10-15 10:37:21 Ruddy

나는이 열을 정당화하지 않습니다 두려워 해요. 상자 사이에 간격을두고 싶습니다만, 예를 들어 테이블 셀 div에 자식 div를 배치하는 것이 좋지만이를 방지하는 것이 좋습니다. 필자는 텍스트 정렬을 왼쪽 열 1에, 텍스트 맞춤 오른쪽 열 3을 추가하려고 생각했지만 역없는 수의 열을 얻을 수 있기 때문에 그렇게 할 수 있기를 바랬습니다. –

@JohannesKlapwijk 지난 DEMO에서는 상자 사이에 공간이 있습니다. 그리고 "열을 정당화"하는 것의 의미는 무엇입니까 – Ruddy

셀 사이의 간격이 보이지 않습니까? 나는 세포들 사이에 공간을 갖고 싶다. 그리고 정당화함으로써 나는 마지막 세포가 오른쪽에 간격을 갖지 않을 것이고 처음에는 왼쪽에 간격이 없다는 것을 의미한다. 일반적으로 셀에 여백을 추가하면 발생합니다. (내 jsfiddle를 참조하십시오, 내가 명확히 희망) –

border-spacing에 .con

border-spacing: 10px;

내가 만족 무언가를 찾기 위해 노력했습니다 추가에 가지고있는 것처럼 당신은 간격을 원하는 경우 내 필요와 나는 CSS가 충분하지 않을까 두렵다.

제 생각에는 jQuery freewall 플러그인이 제게 필요한 것을 줄 수 있다고 생각합니다. 제 소원이 무거울 수도 있지만.

http://vnjs.net/www/project/freewall/

출처

2013-10-16 06:51:15

높이 맞춤 100 % 정당화 된 인라인 블록 div의

답변

관련 문제