0

我对 CSS 中看似直截了当的 3 列有疑问。在 IE8 及以后工作正常，但 IE7 中间列下降到左列和右列下方。我已经在 google 和 stackoverflow 上搜索了解决方案，但无论我尝试什么，它要么什么都不做，要么在 IE8 及更高版本中破坏它。老实说，我不是编程大师，所以我缺乏理解这很可能是原因。

提前致谢

CSS 代码

.wrap {
margin:0 auto;
width:850px;
}

#proleft {
float: left;
width: 245px;
padding-right:10px;
border-right-style:solid;
border-width:1px;
border-color:#dddddd;
}

#procontent {
padding: 0 250px 0px 235px;
margin-left:40px;
margin-right:40px;
}

#proright {
padding-left: 10px;
float: right;
width: 250px;
border-left-style:solid;
border-width:1px;
border-color:#dddddd;
}

.clear {
clear: both;
}

的HTML

<div class="wrap">

<div id="proleft">
CONTENT
</div>  

<div id="proright">
CONTENT 
</div>  

<div id="procontent">
CONTENT
</div>

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

</div>
4

2 回答 2

0

我会这样做 http://tinkerbin.com/cZNxkKK8

css

.wrap {
margin:0 auto;
width:850px;
}

#proleft {
float: left;
width: 250px;
padding: 0;
border-right-style:solid;
border-width:1px;
border-color:#dddddd;
}

#procontent {
float: left;
padding: 0 40px;
}

#proright {
padding: 0;
float: right;
width: 250px;
border-left-style:solid;
border-width:1px;
border-color:#dddddd;
}

.clear {
clear: both;
}

html

<div class="wrap">

<div id="proleft">
CONTENT
</div>  

<div id="procontent">
CONTENT
</div>

<div id="proright">
CONTENT 
</div>  

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

</div>
于 2013-02-14T15:41:27.643 回答
0

这不完全是您答案的解决方案。但是这段代码得到了你需要的结果。

http://jsfiddle.net/mXnS5/

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Hey</title>
</head>
<body>
    <div id="wrap">
        <div id="proleft">

        </div>

        <div id="proright">

        </div>
        <div id="procontent">

        </div>
    </div>
</body>
</html>

CSS

#wrap {
margin:0 auto;
width:850px;
}

#wrap > div {
height:300px;
}

#proleft { float:left; width:245px; background-color:#CCC; }
#proright { float:right; width:245px; background-color:#DDD;}
#procontent { margin-left:245px; margin-right:245px; background-color:#EEE;}
于 2013-02-14T16:02:50.047 回答