CSS 정렬 문제

실제로 3 열 레이아웃이 있습니다. 이 열 중 3 개가 나누기 안에 배치됩니다. 이 열을 정렬하기 위해 float를 사용했습니다.CSS 정렬 문제

#col1 { 
    float: left; 
    width: 15%; 
    background: #93A5C4; 
    padding-bottom: 10px; 
    min-height:450px; 
} 
#col2 { 
    padding: 10px 0; 
    width: 70%; 
    float: left; 
    min-height:450px; 
    position:relative; 
} 
#col3 { 
    float: left; 
    width: 15%; 
    background: #93A5C4; 
    padding: 10px 0; 
    min-height:450px; 
}`

이러한 열이 확장되면이 컨테이너는 확장되어야합니다 .. 그래서 어떻게해야합니까? 나는이 열에 대해 position : relative를 사용하는 것처럼 확장해야합니다!

출처

2012-03-23 Kiran Vemuri

이 더 많은 코드를 볼 필요가 래퍼 DIV에 "높이"를 설정하지 않은 확인해야 예. 다음과 같은 질문에 대답하려면 : 인라인 열 또는 블록 요소입니까? 그리고 그것들은 수평 적으로 또는 수직적으로 어떻게 확장합니까? 지금 무슨 일이 일어나고 무엇을하고 싶니? 그리고 당신은 어디에서나 'clear'을 사용합니까? –

html 코드도 추가 할 수 있습니까? – vivek

컨테이너에 CSS 코드를 게시 할 수도 있습니까? 컨테이너의 너비가 N이면 N까지 확장되고 컨테이너 내부에서는 여러 div가 지시문에 따라 조정됩니다. – TheHube

래핑 div도 마찬가지로 백분율을 사용할 수 있습니다.

그리고 래핑 div의 %를 얻을 수 있기 때문에 열에있는 값을 유지하십시오.

예 :

HTML :

<div id="wrapper"> 
    <div id"col_1"> 
    </div> 
    <div id"col_2"> 
    </div> 
    <div id"col_3"> 
    </div> 
</div>

그리고 CSS :

#wrapper{ 
    width:90%; 
} 
#col_1{ 
    width:15%; 
    float:left; 
} 
#col_2{ 
    width:70%; 
    float:left; 
} 
#col_3{ 
    width:15%; 
    float:left; 
}

출처

2012-03-23 14:10:13 justanotherhobbyist

난 너비 속성 버디를 이미 설정했다 .. 고마워 .. 옙. 100 % :) 고마워 :) 높이를 설정해야했다 :) –

실제로 운동하지 않았다 .. –

그럼 당신은 코드가 엉망이 뭔가가 쪽으로. 문제를 재현 할 수있는 피들을 만들 수 있습니까? 우리는 우리가 가지고있는 정보에 근거하여 문제를 발견 할 수 없습니다. – justanotherhobbyist

블록 요소는 해당 용기의 크기로 확장합니다. 백분율 너비는 포함 요소의 너비를 나타냅니다.

출처

2012-03-23 14:11:47

당신을 위해, HTML을 당신은 래퍼 DIV에게

<div class="clear"></div> 

//the css 
.clear{clear:both;}

을 닫기 전에 수레을 취소하고

출처

2012-03-23 14:19:14

아니요! 작동 안함! 컨테이너는 실제로 요소의 나머지 부분에 맞게 축소되고 컨테이너 외부에 이러한 요소가 남아 있습니다! –

"위치"속성 제거 –

CSS 정렬 문제

답변

관련 문제