iT邦幫忙

0

Web縮小視窗,overflow 左邊圖片無法完整呈現

rr8r8r8r8tw 1 月前4649 瀏覽

Demo:
https://jsfiddle.net/shawnhsuicpdas/46843qor/2/

請問在視窗較小狀態時,左右的scrollbar,左邊的圖片會無法完整拖曳到,右邊表格可以,請問是哪邊問題呢?

PS:剛發現用IE看bottom怎麼會往上跑?

窮嘶發發發 iT邦高手 1 級 ‧ 1 月前 檢舉
直接改給你,請參考
窮嘶發發發 iT邦高手 1 級 ‧ 1 月前 檢舉
個人修改如下,您試試
#HTML
<div id="LoginContainer">
<div id="LoginLeftContainer"><img src="http://lorempixel.com/400/250/" /></div>
<div id="LoginMiddleBar"><img src="http://lorempixel.com/1/311" /></div>
<div id="LoginRightContainer">
<form id="SignupFormPost" method="POST">
<input class="UserNameInput" placeholder="UserName" name="UserName" type="text">
<input class="PassWordInput" placeholder="PassWord" name="PassWord" type="password">
<select class="LanguageSelect" name="lang">
<option value="" disabled="" selected="">Select your language</option>
<option value="en">English</option>
<option value="tw">Traditional Chinese(繁體中文)</option>
<option value="cn">Simplified Chinese(简体中文)</option>
</select>
<button class="loginbtn loginbtn-agree loginbtn-margin">Login</button>
</form>
</div>
</div>
#CSS
#LoginContainer {
display: block;
width: 900px;
height: 300px;
padding:5%;
margin:auto;
clear:both;
}
#LoginLeftContainer,
#LoginMiddleBar,
#LoginRightContainer{
position: absolute;
padding:5%;
}

#LoginLeftContainer {
width:49%;
float: left;
margin:auto;
}

#LoginMiddleBar {
width:1%
float: right;
left: 50%;
}

#LoginRightContainer {
float: right;
width: 49%;
left: 52%;
}

.UserNameInput {
width: 100%;
/* height:40px; */
padding: 5px;
margin-bottom: 10px;
}

.PassWordInput {
width: 100%;
/* height:40px; */
padding: 5px;
margin-bottom: 10px;
}

.LanguageSelect {
width: 100%;
/*height: 43px;*/
padding: 5px;
margin-bottom: 10px;
}


/*loginbtn*/

.loginbtn {
width: 60px;
height: 25px;
color: #151515;
letter-spacing: 1px;
position: absolute;

}

.loginbtn-agree {}

.loginbtn-margin {
margin-top: 8px;
}
rr8r8r8r8tw iT邦新手 5 級 ‧ 1 月前 檢舉
好像跑掉了
因為LoginLeftContainer的圖檔固定要400*60
LoginMiddleBar為1*311
LoginRightContainer依比例分配
整個置中在頁面中間,900px*300px

1 個回答

1
WilliamHuang
iT邦大師 1 級 ‧ 1 月前

對不起唷因為我的畫面跑出來
不等於您的畫面
可以麻煩截個圖
紅色標註一下嗎
那會加快對您的支援速度
/images/emoticon/emoticon39.gif

WilliamHuang iT邦大師 1 級 ‧ 1 月前 檢舉

在講個例子
為什麼我要這樣要求呢
因為就算我在公司寫好Code
到客戶那因為螢幕廠牌
解析不同(就算一樣還是會跑版)
所以我都是帶NB現場調整
這個真的無法一個CODE走天下
只是~單純分享

窮嘶發發發 iT邦高手 1 級 ‧ 1 月前 檢舉

那是真的,我還看過有人開 150% dpi系統字型、網頁又放大 250%檢視,一直喊為什麼頁面還要左右調整才能看到全部的資料

我要發表回答

立即登入回答