둥근 모서리가있는 3 열 레이아웃

Question

뭔가를 만들려고합니다 : http://student.santarosa.edu/~anarbuto/CSS/templates/stylin2_chapters/chapter_5/3_col_rounded.html JS 또는 CSS 해킹이 없습니다.

또한이 시도 : http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm

많은 다른 예,하지만 그들 중 누구도 잘 작동하지 않습니다.

왼쪽 및 오른쪽 열이 수정 폭 (예 : 300px)이되고 가운데 열이 나머지 페이지를 차지하도록하고 싶습니다.

누군가가 도움을 줄 수 있는지 잘 모르겠습니까?

감사합니다 !!!

편집 : 높이 (높이를 지정하지 않고)가 동일해야합니다. 즉, 3 개의 모든 열은 가장 높은 열과 동일한 높이를 가져야합니다.

Answer 1

div 라운드의 모서리를 만들려면 CSS를 사용해야하고 그냥 가야합니다. http://www.w3schools.com/css3/css3_borders.asp 이것은 내가 믿는 해킹이 아닙니다.

Answer 2

편집 :

내가 너비 %를 추가 레이아웃이 fluit되기 위해서는 :

http://jsfiddle.net/qBH3A/3/

CSS :

---

h1{ 
    padding: 0; 
    margin: 0; 
    text-align: center; 
} 

#container{ 
    width: 960px; 
    margin: 0 auto; 
    padding: 0; 
    background-color: grey; 
    border-radius: 10px; 
    padding: 10px; 
    overflow: hidden; 
} 

#header{ 
    background-color: green; 
    width: 100%; 
    margin: 0 auto; 
    border-radius: 10px; 
    margin-bottom: 10px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

#left{ 
    background-color: yellow; 
    float: left; 
    width: 20%; 
    margin: 0 auto; 
    border-radius: 10px; 
    height: 300px; 

} 

#right{ 
    background-color: blue; 
    float: right; 
    width: 20%; 
    margin: 0 auto; 
    border-radius: 10px; 
    height: 300px; 
} 

#center{ 
    background-color: red; 
    width: 58%; 
    margin: 0 auto; 
    border-radius: 10px; 
    height: 300px; 
    float: left; 
    margin-left: 10px; 
} 

난에 대한 간단한 예제를 만들어 960 픽셀 격자 레이아웃 :

http://jsfiddle.net/qBH3A/1/

값을 최대 너비와 너비로 설정하면됩니다.

HTML :

<div id="container"> 
    <div id="header"> 
    <h1>header</h1> 
    </div> 

    <div id="left"> 
     <h1>Left</h1> 
    </div> 

    <div id="right"> 
     <h1>right</h1> 
    </div> 

    <div id="center"> 
     <h1>center</h1> 
    </div> 
</div> 

CSS : 나는 10px의 국경 반경을 사용

h1{ 
    padding: 0; 
    margin: 0; 
    text-align: center; 
} 

#container{ 
    width: 960px; 
    margin: 0 auto; 
    padding: 0; 
    background-color: grey; 
    border-radius: 10px; 
    padding: 10px; 
    overflow: hidden; 
} 

#header{ 
    background-color: green; 
    width: 100%; 
    margin: 0 auto; 
    border-radius: 10px; 
    margin-bottom: 10px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

#left{ 
    background-color: yellow; 
    float: left; 
    width: 200px; 
    margin: 0 auto; 
    border-radius: 10px; 
    height: 300px; 
} 

#right{ 
    background-color: blue; 
    float: right; 
    width: 200px; 
    margin: 0 auto; 
    border-radius: 10px; 
    height: 300px; 
} 

#center{ 
    background-color: red; 
    width: auto; 
    max-width: 540px; 
    margin: 0 auto; 
    border-radius: 10px; 
    height: 300px; 
} 

참고;

희망이 당신이 원하는 것입니다.