0
성배 3 열 레이아웃을 따르고 있습니다 (here). 새로운 CSS 기법을 사용하여 모서리를 둥글게하려고하지만 왼쪽 상단 모서리를 얻을 수 없습니다. 제대로 행동하십시오. 모퉁이는 바깥쪽에 둥글지만 내부에는 둥근 것이 아닌 다른 div가 있고 둥근 모서리를 내 보냅니다. 나는 이것이 마진 전환과 그 밖의 일들로 인해 발생할 수 있다고 생각하지만,이 레이아웃을 완성하는데 많은 성공을 거두지는 못한다.둥근 모서리가있는 성배 3 열이 일부 브라우저에서 작동하지 않습니다
나는 단지이 시점에서 모서리가 파이어 폭스에서 제대로 작동하는지 언급해야한다, 나는 분명 IE는 예외가 될 수있다 (그들 모두 현대 브라우저에서 작동합니다 - 좀 더 크롬, 오페라 및 사파리를 찾고 있어요 지원하다).
테스트 용으로 간단한 레이아웃의 내 레이아웃을 만들었습니다. 누군가가 적어도 올바른 방향으로 나를 끌어낼 수 있기를 바랍니다. 일부 lorem ipsum을 추가하고 색상을 변경하여 열과 div를 코딩하여 어떤 스타일을 변경해야하는지 쉽게 알 수 있도록했습니다. 다음은 정확한 코드입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Title Here</title>
<style type="text/css">
.wrapper
{
color: #333;
line-height: 130%;
margin: 10px 12px 0px 10px;
-webkit-border-radius: 11px 11px 0 0;
-moz-border-radius: 11px 11px 0 0;
border-radius: 11px 11px 0 0;
}
.columnmask
{
position: relative;
clear: both;
float: left;
width: 100%;
overflow: hidden;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-top: 1px solid gray;
}
.threecol
{
background: white;
-webkit-box-shadow: #000 2px 2px 3px;
-moz-box-shadow: #000 2px 2px 3px;
box-shadow: #000 2px 2px 3px;
background: red;
}
.threecol .middlecolumn
{
float: left;
width: 200%;
margin-left: -170px;
position: relative;
right: 100%;
background: blue;
}
.threecol .leftcolumn
{
float: left;
width: 100%;
margin-left: -50%;
position: relative;
left: 340px;
background: yellow;
}
.threecol .midcolwrap
{
float: left;
width: 50%;
position: relative;
right: 170px;
padding-bottom: 1em;
}
.threecol .midcol
{
margin: 0 180px;
position: relative;
left: 200%;
overflow: hidden;
padding-top: 5px;
background: green;
}
.threecol .leftcol
{
float: left;
float: right;
width: 160px;
position: relative;
right: 5px;
text-align: center;
background: silver;
}
.threecol .rightcol
{
float: left;
float: right;
width: 160px;
margin-right: 15px;
position: relative;
left: 50%;
text-align: center;
background: purple;
}
.footer
{
-webkit-border-radius: 0 0 11px 11px;
-moz-border-radius: 0 0 11px 11px;
border-radius: 0 0 11px 11px;
background: orange;
}
#footer
{
position: relative;
clear: both;
margin: 0px 10px 10px 10px;
padding: .5em;
text-align: center;
border: 1px solid gray;
-webkit-box-shadow: #000 2px 2px 3px;
-moz-box-shadow: #000 2px 2px 3px;
box-shadow: #000 2px 2px 3px;
}
.roundTop
{
-webkit-border-radius: 11px 11px 0 0;
-moz-border-radius: 11px 11px 0 0;
border-radius: 11px 11px 0 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="colmask" class="columnmask threecol roundTop">
<div class="middlecolumn">
<div class="leftcolumn">
<div class="midcolwrap">
<div class="midcol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="leftcol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="rightcol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="footer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</html>
왼쪽 열 div가 브라우저의 가장 왼쪽 픽셀에서 시작하고 부모 div 내에 중첩되어 있기 때문에이 사실을 많이 알 수 있습니다. 노란색 div의 모서리처럼 보이는 것은 실제로 사각형에 약 50-100 픽셀입니다. 말이 돼? 그것을 고치는 방법에 관해서는 확실하지 않다. 나는 적어도 내가 너에게 방향을 제시 할 것이라고 생각 했으므로 10 분 안에 그걸로 그걸 알아낼 수 없었다. –
팁 주셔서 감사! 나는 그것이 사실이라고 추측했지만, 가장 왼쪽의 픽셀/코너를보기 위해 일시적으로 그것을 수정하는 좋은 방법을 이해할 수도 없었다. 또한 왼쪽 및 오른쪽 열의 모서리에 둥근 3 열 레이아웃을 만들기위한 최적의 구현이 아니라고 생각할 수도 있습니다. 누구든지 더 나은 접근법을 알고 있다면, 나는 모두 귀입니다! – Joseph