CSS div 문제

Question

3 divs를 겹쳐서 문제가있는 것 같습니다. 몇 가지 다른 페이지를 살펴 보았습니다.이 페이지는 코드 작성 방법과 팁을 알려주었지만 어떤 이유로 옳지 않습니다. 다음은 내 페이지에서 사용중인 div 코드와 스타일 시트에서 div에 대한 정보입니다. 누군가를 바라는 것은 내가 뭘 잘못하고 있는지에 대한 수정을 도와 줄 수 있습니다.

나는 정말로 충분한 정보를주지 않았기 때문에 또 다른 편집을하기로 결정했다. 나는 3 개의 divs를 나란히 놓았지만 서로 붙어있는 것처럼 보이고 하나는 다르다. 나머지 부분과 평평하게 맞추기를 원한다. 형세. 나는 당신이 내가 무엇을 볼 수 있는지 사이트에 대한 링크를 가지고있다 what I have

또한 게시물에 # t2에서 누락 된 것에 대해 미안하다. 우연히 코드에서 게시물을 만들 때 그것을 실수로 삭제했다.

<div id="testwrap"> 
    <div id="t1">left</div> 
    <div id="t3">right</div> 
    <div id="t2">middle</div> 
</div> 

#testwrap { 
width: 933px; 
margin-right: auto; 
margin-left: auto; 
} 

#t1 { 
width: 311px; 
margin-right: auto; 
margin-left: auto; 
background-color: #FFF; 
height: 220px; 
margin-top: 20px; 
margin-bottom: 20px; 
float: left; width:311px; 
padding: 10px; 
} 
#t2 { 
background-color: #FFF; 
height: 220px; 
width: auto; 
padding: 10px; 
margin-top: 20px; 
margin-right: auto; 
margin-bottom: 20px; 
margin-left: auto; 
} 
#t3 { 
background-color: #FFF; 
height: 220px; 
width: 311px; 
margin-right: auto; 
margin-left: auto; 
margin-top: 20px; 
margin-bottom: 20px; 
width:311px; 
float: right; width:311px; 
padding: 10px; 
} 

Answer 1

다음은 깨끗한 작업 코드입니다 (코드가 너무 지저분합니다). 이것을 HTML 문서에 복사하여 복사 할 수 있습니다. div의 배경색을 원하는대로 변경하십시오.

http://jsfiddle.net/K3FJe/

HTML

<div id="testwrap"> 
    <div id="t1">left</div> 
    <div id="t2">middle</div> 
    <div id="t3">right</div> 
</div>​ 

CSS는 내가 그들 사이에도 공백을 업데이트

#testwrap { 
    width: 933px; 
    height: 280px; 
    margin: 0 auto; 
    background: black; 
} 

#t1, #t2, #t3 { 
    height: 220px; 
    padding: 10px; 
    color: #FFF; 
    float: left; 
} 

#t1 { 
    width: 273px; 
    margin: 20px 6px 20px 12px; 
    background-color: red; 

} 

#t2 { 
    width: 279px; 
    margin: 20px 6px 20px 6px; 
    background-color: blue; 
} 

#t3 { 
    width: 273px; 
    margin: 20px 12px 20px 6px; 
    background-color: green; 
}​ 

, 나는이 일을한다고 생각합니다.

Answer 2

t1과 t3을 플로팅하고 그 결과로 문서 흐름에서 벗어나는 것처럼 보입니다. # t2도 뜨고 (자동 대신) 결과 공간에 맞게 너비를 변경하면 작동합니다.

#t2 { 
    background-color: #000; 
    height: 220px; 
    width: 250px; 
    padding: 10px; 
    margin-top: 20px; 
    margin-right: auto; 
    margin-bottom: 20px; 
    margin-left: auto; 
    float:left; 
} 

Answer 3

당신은 사용할 수 있습니다

#testwrap { 
    display: table; 
    [...] 
} 
#t1, #t2, #t3 { 
    display : table-cell; 
    width: 271px; 
} 

그런 다음 모든 수레를 제거합니다.

이렇게하면 모든 열의 높이가 항상 동일합니다.