1. 홈
  2. 질의 응답
  3. CSS : 부모 너비에 따라 div 크기를 조정하십시오

CSS : 부모 너비에 따라 div 크기를 조정하십시오

2010-12-14 10 views
3

좋아, 기본적으로 유동적 인 레이아웃을 구축하고 있습니다. 내 HTML은 다음과 같이이다 : 여기 CSS : 부모 너비에 따라 div 크기를 조정하십시오

<div id="container"> 
    <div class="box" id="left">Left</div> 
    <div class="box" id="center">This text is long and can get longer</div> 
    <div class="box" id="right">Right</div> 
    <div class="clear"></div> 
</div>

는 CSS입니다 : 내가 알아야 할 

#container{ 
    width: 100%; 
} 
.box{ 
    float: left; 
} 
#left, #right{ 
    width: 100px; 
} 
#center{ 
    width: auto; /* ? */ 
    overflow: hidden; 
} 
.clear{ 
    clear:both; 
}

내가 #container 다시 크기의 한없이 #center에 다시 크기를 얻는 방법이다 요소는 서로 아래에 움직입니다.

출처

2010-12-14 Franky Chanyau

+0

를 설정하는 단순한 보정 :

This text is long and can get longer
ID가 "센터"입니다) – stecb

+0

환호, 나는 천만에요 –

+0

있다고했다 생각하지 못할, 아니 probs;) – stecb

답변

2

(이러한 수정을 시도 단순한 유동 요소, 필요 없음 절대 elems 또는 가스켓)

just added a new fiddle

<!DOCTYPE html> 

<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>fluid layout</title> 
<style> 
    /*class to set the width of the columns */ 
    .floatbox{ 
     width:100px; 
    } 

    #container{ 
     width: 100%; 
     float:left; 
    } 
    #left{ 
     float:left; 
    } 
    #right{ 
     float:right; 
    } 
    #center{ 
     overflow: hidden; 
    } 
    .clear{ 
     clear:both; 
    } 
</style> 
</head> 
<body> 
    <div id="container"> 
     <!-- floating column to the right, it must be placed BEFORE the left one --> 
     <div class="floatbox" id="right">Right</div> 
     <div class="floatbox" id="left">Left</div> 

     <!-- central column, it takes automatically the remaining width, no need to declare further css rules --> 
     <div id="center">This text is long and can get longer</div> 

     <!-- footer, beneath everything, css is ok --> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

출처

2010-12-14 13:53:14 stecb

1

사용 용기에 패딩 절대 위치 왼쪽/오른쪽으로 될 것이다 발생하는 float 문제가 발생하지 않도록 완벽하게이 작업을 수행하고 가장 쉬운 방법 패딩 영역의 요소 (http://www.jsfiddle.net/gaby/8gKWq/1에서 데모)

HTML을

<div id="container"> 
    <div class="box" id="left">Left</div> 
    <div class="box" id="right">Right</div> 
    <div class="box" id="centre">This text is long and can get longer</div> 
</div>

더 이상 중요하지 않습니다 div의 순서 ..

CSS는

#container{ 
    padding:0 100px; 
    position:relative; 
} 
.box{ 
    /*style the boxes here*/ 
} 
#left, #right{ 
    width: 100px; 
    position:absolute; 
} 
#left{left:0;top:0;} 
#right{right:0;top:0;} 

#center{ 
    /*anything specific to the center box should go here.*/ 
}

출처

2010-12-14 13:42:22

관련 문제

 관련 문제