-1

SharePoint 2007 サイトを SharePoint 2010 に移行する必要があり、ユーザーは IE8 ブラウザーを使用しています。

そこで、クロスブラウザモードでそのレイアウトのWebサイトを設定したいと思います。

私の本当の問題は、ブラウザの高さが 100% の左右の列にグラデーションの背景を設定し、中央divの最小幅が 955px でなければならないことです。

TABLEタグなしでもいいですか？

私は試した：

<div id="main1">
   <div id="main2">
    <div id="left">&nbsp;</div>
    <div id="right">&nbsp;</div>
    <div id="middle">
         <table width="100%" height="500"> <tr><td>aaa</td></tr></table>
    </div>
    <div class="cleaner">&nbsp;</div>
   </div>
</div>

CSS:

body,html{
     height:100%;
     min-height:100%;
     background-color:gray;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
}
#main1 {
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;

MIN-WIDTH: 995px;
border-bottom:1px solid gray;

height: auto;
min-height:100%


}
#main2 {
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
BACKGROUND: url(blue.gif) repeat-y right top;
PADDING-TOP: 0px;
}
#left {
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-LEFT: 0px;
WIDTH: 20px;
PADDING-RIGHT: 0px;
background-color:blue;
FLOAT: left;
FONT-SIZE: 80%;
PADDING-TOP: 0px;
height:100%;
}
#right {
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-LEFT: 0px;
WIDTH: 20px;
PADDING-RIGHT: 0px;
background-color:blue;
FLOAT: right;
FONT-SIZE: 80%;
PADDING-TOP: 0px;
height:100%;
}
#middle {
MARGIN: 0px 20px;
BACKGROUND: red;
FONT-SIZE: 80%;
height:100%;
min-height:100%;
}
.cleaner {
HEIGHT: 1px;
CLEAR: both;
}
4

3 に答える 3

0

標準の画面解像度は 1024*768 であるため、左右の div と中央の div を別々に固定幅にすることができます。

于 2013-03-28T10:11:50.337 に答える
0

HTML

<div id="mainContainer">

    <div id="left-column" class="column">           
    </div>

    <div id="middle-column" class="column">             
    </div>

    <div id="right-column" class="column">      
    </div>  

</div>

CSS

#mainContainer{
    width: 1355px;
    margin: 0px auto;
    padding: 0px;
}

.column{
    display: block;
    height: 100%;
    float: left;
}
#middle-column{
    width: 955px;

}
#left-column, #right-column{
    width: 200px;

}
于 2013-03-28T10:12:18.133 に答える
-1

はい、

<aside class="sidebar left"></aside>
<div class="mainContent"></div>
<aside class="sidebar right></asdie>

残りはCSSです。<aside></aside>HTML5タグです。楽しむ。

于 2013-03-28T10:05:28.180 に答える