Web ページのレイアウト_html/css_WEB-ITnose

初学者，对于自己布局比较困难，使用的是现有网页的模板，上中下结构，中间又分为左右两部分，左边是导航选项，点击后ajax更新右边的内容，现在的问题是我是直接使用的1330固定的宽度，浏览器没有全屏的时候，右边显示的表格就会掉下去，怎么固定在右边不掉啊，谢谢啊



    
    
    
    
    
    

    

    

    

        

        

    

    

        

            
            
        

        

        

Nodes

        

            

All

            

Beijing

        

        

Manage

        

            

Gateway

            

Nodes

            

Groups

        

        

Firmware

        

            

detals

        

        

About

        

            

detals

        

    

    

        

    

    

 © Copyright Texas Instruments Incorporated. All rights reserved.

.bigclass {
background-repeat: no-repeat;
背景位置: 左中央;
高さ: 25ピクセル;
幅: 150ピクセル;
フォントサイズ: 18px;
フォント スタイル: 通常;
フォントの太さ: 太字;
テキスト装飾: なし。
text-align: 左;
テキストインデント: 25px;
垂直配置: 中央;
行の高さ: 26px;
カーソル: 手;
背景画像: url(../images/header13.gif);
margin-bottom: 6px;
左マージン: 31px;
マージン右: 0px;
マージントップ: 11px;
padding-bottom: 0px;
padding-left: 0px;
パディング右: 0px;
padding-top: 1px;
}

.smallclass{
width: 150px;
高さ: 20ピクセル;
行の高さ: 7px;
}
.hiddendiv {
FILTER: alpha(Opacity=70);
マージン: 0px;
パディング: 0px;
高さ: 44ピクセル;
幅: 150ピクセル;
}

.blankdiv {
background-attachment: 修正済み;
背景-繰り返し: 繰り返します。
背景位置: 中央 中央;
マージン: 0px;
パディング: 0px;
高さ: 27ピクセル;
幅: 150ピクセル;
}
body{
背景色:#f0f0f0;
フォントサイズ:12px;
高さ: 100%;
マージン:0 自動;
パディング:0px;
}
a{
カーソル: 手;
カラー:#0000FF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;

}
a:active {
text-decoration: none;
}
div{
/*border: 1px #000000 solid;*/
}
#contain{
position: relative;
マージン:0 自動;
パディング:0px;
/*background-color:#FFFFFF;*/
width: 100%;
高さ: 自動;
text-align: 中央;
}
#contain #header{
位置: 相対;
text-align: 右;
背景画像: url(../images/headerlogo.gif);
背景位置: 中央下。
背景リピート:リピートなし;
行の高さ: 36px;
幅: 1310ピクセル;
高さ: 90ピクセル;
トップ:20ピクセル;
左:20ピクセル;
}

#contain #left{
位置: 相対;
左: 20ピクセル;
トップ:20ピクセル;
フロート: 左;
クリア:左;
幅: 217ピクセル;
高さ:700ピクセル;
背景色:#f3fde8;
}

#contain #right{
位置:相対;
トップ:20ピクセル;

フロート: 右;
クリア: そうです。
幅: 1093ピクセル;
高さ: 700ピクセル;
右:18ピクセル;
背景色:#f9fef4;
/* 背景-画像: url(../images/centertop.gif);*/
背景-位置:トップ;
背景リピート:リピートなし;
}

#fir{
background-image:url(../images/signout.gif);
背景位置: 中央;
背景リピート:リピートなし;
左:20ピクセル;

幅:217ピクセル;
高さ:32ピクセル;
行の高さ: 32px;
カラー:#FFFFFF;
フォントスタイル: 継承;
フォントサイズ:18px;
}
#showmenu{
位置: 相対;

高さ: 700ピクセル;
}
/* 表示列表の修饰 */
#showarticle{
font-family: "Trebuchet MS", sans-serif;
フォントサイズ: 16px;
フォントの太さ: 太字;
行の高さ: 1.4em;
フォント スタイル: 通常;
border-collapse: 分離。
}
#showmenu .shownodes thead th{
padding:15px;
色:#fff;
text-shadow:1px 1px 1px #568F23;
ボーダー:1px solid #93CE37;
bord-bottom:3px solid #9ED929;
背景色:#9DD929;
背景: -webkit-gradient(
線形;
左下,
左上,
カラーストップ(0.02, rgb(123,192,67)),
カラーストップ(0.51, rgb(139,198,66)) ,
color-stop(0.87, rgb(158,217,41))
);
背景: -moz-linear-gradient(
中央 下,
rgb(123,192,67) 2%,
rgb(139,198,66) 51%,
rgb(158,217,41) 87%
);
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius:5px 5px 0px 0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
#showmenu .shownodes thead th:empty{
background:transparent;
border:none;
}
#showmenu .shownodes tbody th{
color:#fff;
text-shadow:1px 1px 1px #568F23;
background-color:#9DD929;
border:1px solid #93CE37;
border-right:3px solid #9ED929;
padding:0px 10px;
background:-webkit-gradient(
linear,
left bottom,
right top,
color-stop(0.02, rgb(158,217,41)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(123,192,67))
);
background: -moz-linear-gradient(
left bottom,
rgb(158,217,41) 2%,
rgb(139,198,66) 51%,
rgb(123,192,67) 87%
);
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
#showmenu .shownodes tbody td{
padding:10px;
text-align:center;
background-color:#DEF3CA;
border: 2px solid #E7EFE0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#666;
text-shadow:1px 1px 1px #fff;
}
#contain #rowfooter {
position: relative;
color:#555;
font-size:18px;
height: 50px;
padding:20px 0 40px;
text-align: center;
float:none;
margin-bottom: auto;
clear: both;
}

回复讨论(解决方案)

#contain {
position: relative;
margin: 0 auto;
padding: 0px;
/*background-color:#FFFFFF;*/
width: 100%;
height: auto;
text-align: center;
display:table;
}

楼主试试

把#contain #left的width值改为17%; #contain #rightr的width值改为83%.

    
    


    

****信息管理系统

    

        

• 百度一下

            
• 百度一下

            
• 百度一下

        

    

    

    

版权所有©

#contain {
position: relative;
margin: 0 auto;
padding: 0px;
/*background-color:#FFFFFF;*/
width: 100%;
height: auto;
text-align: center;
display:table;
}

楼主试试

谢谢啊，有用，这个，虽然有点走样但是效果挺好的，我再根据这个改改

把#contain #left的width值改为17%; #contain #rightr的width值改为83%.

首先，谢谢帮我解答，按百分比可以，我试了一下，但是浏览器窗口一旦缩小了，图片部分缩小的很严重，估计是因为写了太多具体的宽度吧，协调性不太好，还是谢谢啊

    
    


    

****信息管理系统

;
a>
;li>百度

< div id="footer">Copyright

ありがとうございます、このレイアウトはとても良いです。 , 教えていただいたレイアウトテンプレートを使ってみます