2015-02-02 2 views
0

나는 div라는 중첩 된 div B와 C를 포함하는 A라는 div가있는 반응 형 디자인을 사용합니다. url www.tripleconcept.nl/nested_div_height.jpg부모 div의 높이와 중첩 div 중 하나의 div와 동일한 수준의 div와 높이를 맞 춥니 다

Div B에는 텍스트 길이 (텍스트의 길이와 DIV의 너비에 따라 다름)가 들어 있습니다. 작은 화면 크기에서는 너비가 더 작고 높이가 길어집니다.) DIV C에는 이미지가 포함되어 있습니다.

DIV B 텍스트의 길이가 높이와 부모 A를 포함하는 높이로 표시되도록하고 싶습니다. DIV C의 높이는 B와 A의 높이까지 조정해야합니다. 너비가 잘립니다.

알아낼 수 없습니다. 누가 내가 올바른 CSS를 작성하는 데 도움을 주시겠습니까? 고맙습니다.

+0

당신은 jsfiddle을 할 수 있습니까 ?? –

답변

2

질문을 올바르게 이해하면 도움이됩니다. jsfiddle

이것은 단지 예일뿐입니다. 트릭은 두 열 모두에서 display:table-cell;입니다.

이 정보가 도움이되기를 바랍니다.

+0

Hi Greenz, 답장을 보내 주시겠습니까? 불행히도 문제가 해결되지 않습니다. 나는 너비가 아닌 높이에 맞는 코드를 설정해야한다. 너비가 잘 작동합니다. Div B에는 텍스트가 있고 높이가 텍스트의 길이에 따라 조정됩니다 (작은 화면에서는 높이가 더 큽니다). DIV C의 높이는 B와 정확히 동일해야합니다. 이미지가 너무 넓어서 잘려야합니다. ;-) – HedyDezigner

+0

@HedyDezigner 위에서 언급 한 jsfiddle 링크는 귀하가 귀하의 코멘트에서 언급 한 모든 부분을 구현하고 있음을 지적하고자합니다. div A와 div C의 높이는 모두 div B에있는 텍스트의 양에 따라 다르며 둘 다 div B와 정확히 같은 높이를 갖습니다. 이미지가 너무 넓 으면 이미지가 잘립니다. div A의 높이를보고 싶다면 div B에서 배경색을 제거하고 div A (파란색)가 div B의 맨 아래까지 확장되는 것을 볼 수 있습니다. 질문에 여전히 답이 없으면 다시 문제. 건배! –

관련 문제