iT邦幫忙

0

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

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

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

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

直接改給你,請參考
個人修改如下,您試試
#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;
}
好像跑掉了
因為LoginLeftContainer的圖檔固定要400*60
LoginMiddleBar為1*311
LoginRightContainer依比例分配
整個置中在頁面中間,900px*300px

1 個回答

不明
【**此則訊息已被站方移除**】

我要發表回答

立即登入回答