나는 클라이언트를위한 웹 사이트를 설계하고 있으며, 컨테이너의 100 %를 조정하기 위해 두 개의 side-by-side DIV를 얻으려고합니다. 나는 나란히 할 일을했지만, 오른쪽 DIV가 왼쪽 DIV와 같은 높이가 될 수는 없습니다.CSS : 자동 높이와 컨테이너의 높이에 나란히 두 DIV를 얻는 방법?
당신은 여기에서 문제를 볼 수 있습니다 http://www.campusmomlaundry.com/
은 "도전"과 "혜택"을 된 DIV 수동으로 높이를 지정하지 않고, 사이드 바이 사이드와 같은 높이이어야한다. 어떻게해야합니까?
귀하의 문제는 바깥 쪽 div가 내용에 의해 자동으로 크기가 조정되는 내부 내용에 의해 자동으로 크기가 조정된다는 것입니다.
당신은 옵션이 몇 가지있다.
display 속성으로 재생하고 table-cell과 같은 여러 값을 시도해보십시오. 이 브라우저는 일부 구형 브라우저에서는 작동하지 않습니다. (IE뿐만 아니라 일부 이전 Firefox 및 Chrome도 출시)나는 마지막 하나가 가장 논란이 있다는 것을 알고 있습니다. 그러나 그것은 당신의 문제에 대한 가능한 해결책이며 적어도 평가할 필요가없는 이유는 없습니다.
([신음 소리], 아무도 우리의 우주에 같은 건 없다! 단어 "의미 HTML"를 언급하지 제발, 제발.)
jQuery를 사용하여 자동으로 DIVs의 높이를 서로 동기화합니다 ... 해킹입니다 ...하지만 나 자신과 많은 사람들이 불량한 디자인으로 생각하고 있음에도 불구하고 테이블은 해킹이 적습니다. 사실 나는 아마도 테이블을 사용해야한다고 생각합니다. 최고의 해킹을 사용하는 것보다 최고의 디자인에서 벗어나는 것이 더 낳습니다. –
시도해 보셨습니까? height: auto; 또는 height: 100%;?
A 목록에 대한 기사 비슷한 문제를 해결하는 것 외에도 참조로 사용할 수 있습니다. Faux Columns.
이것이 내가 생각하는 최선의 선택이다. 다음은 자바 스크립트를 사용하고 있습니다. –
그것은 나를 있었다면. 나는 자바 스크립트를 통해이 문제를 해결할 것이다. jquery 사용하여 당신은 ... 그것을해야
$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
$('#rightColumn').height($('#leftColumn').height());
}
else
{
$('#leftColumn').height($('#rightColumn').height());
}
});
을 할 수 있습니다. 당신이 내가 함께 일하는 사람들을 좋아한다면 CSS 문제에 Javascript를 사용하는 것을 좋아하지 않을 것입니다. 그렇다면 운이 좋지 않을 것입니다. 대부분의 경우 JQuery를 사용하고 CSS를 사용하여 "올바른 방법"을 사용하는 것이 훨씬 빠릅니다. 하루 종일 스타일을 다양하게 조합하여 사용할 수 있습니다.
나는 그것을했으나 $ (document) .ready를 시도하고 너무 빨리 실행했기 때문에 코드를 $ (window) .load로 변경하십시오. –
CSS 상자 모델 및 레이아웃이 엉망입니다. –
-1 더 이상 존재하지 않는 라이브 사이트에 대한 링크가있는 게시 용 – kontur
정말요? 거의 2 년 전 게시 된 죽은 링크에 대해 -1? –