当页面重新调整大小或放大时，div会下降 [英] div's dropping down when page is re-sized or zoom-in
问题描述
我有一个非常简单的问题，即使要问我也很尴尬:)
i我正在制作一个应该按顺序排列的模板网站：
离开了img |中心|当浏览器处于100％模式时它看起来不错
但是在放大中心时正确img
低于图像
i试图修复它并在网上搜索答案但没有运气
我的目标是当用户放大在页面中或重新调整页面大小，页面只会缩小
并且不会影响页面中的img或其他内容...
这是 html ：
i have a very simple question that i am embarrassed even to ask:)
i am making a template site which should be in that order:
left img | center | right img
when the browser in in 100% mode its look ok
but when zooming in the center goes below the image
i tried to fixed it and searched the web for the answer but with no luck
my goal is when the user zoom in or re-size the page, the page will only shrink
and wont effect the img or other thing in the page...
this is the html:
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/JScript.js" type="text/javascript"></script>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="left_ad" style="background-image: removed(images/ad_left.jpg); width:188px; height:546px;">
</div>
<div id="right_ad">
<img alt="right_ad" src="images/ad_right.jpg" width="188px" height="546px" />
</div>
<div id="wrapper">
<div id="logo_img">
<img width="909px" src="" height="202px" alt="logo_img" />
</div>
<ul id="nav">
<li><a href="index.html"></a></li>
<li><a href="about.html"></a></li>
<li><a href="portfolio.html"></a></li>
<li><a href="contact.html"> </a></li>
</ul>
<div id="content_img">
<img width="909px" src="" height="761px" alt="content_img" />
</div>
<div id="footer">
<table id="table_footer">
<tbody>
<tr>
<td>
<a href=""></a>
</td>
<td>
<a href="/"></a>
</td>
<td>
<a href="/"></a>
</td>
<td id="last_footer_link">
<a href=""></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</body>
</html>
这是css（包含不必要的东西，因为我尝试过的东西）
this is the css(contains unnecessary things also as i tried things)
body
{
direction: rtl;
background: url(../images/site_background.jpg);
width: 100%;
}
#wrapper
{
width: 910px;
margin: auto;
margin-top: -8px;
display: block;
position: relative;
}
#logo_img {
margin-top: 8px;
}
#nav
{
padding: 0;
margin: 0px 0 0px 0;
display: block;
overflow: hidden;
background: #2e2e2e url(../images/nav_bar.jpg) repeat-x;
list-style: none;
font-size: large;
height: 39px;
width: 909px;
}
#nav li
{
display: inline;
}
#nav li a
{
padding: 10px 20px;
float: right;
display: block;
color: white;
text-decoration: none;
}
#nav li a:hover
{
background: #1b1b1b url(../images/nav_bar.jpg);
}
#table_footer
{
margin: 0 auto;
}
#footer td
{
font-size: 12px;
border-left: 0.05cm solid #b3b2b2;
padding-right: 10px;
padding-left: 10px;
}
#footer a
{
color: #363535;
border-spacing: 2px;
text-decoration: none;
}
#footer #last_footer_link
{
border-left: none;
}
#right_ad
{
margin-right: 214px;
margin-top: 386px;
float: right;
}
#left_ad
{
margin-left: 214px;
margin-top: 386px;
float: left;
}
任何帮助将不胜感激...
感谢批在高级
推荐答案
嘿，
以下是您的查询的解决方案。我使用了风格的百分比来满足你的期望。
HTML
Hey,
Following is the solution for your query. I used the percentage in style to get your expectation.
HTML
<div class="page">
<div class="wrapper">
<div class="left"> <img alt="right_ad" src="http://www.thelifestylecompound.com/wp-content/uploads/2013/11/tumblr_mp8pwtsHbt1sxrbl4o1_5001.jpg" /> </div>
<div class="center">center text</div>
<div class="right"> <img alt="right_ad" src="http://www.hdwallpapersonly.com/wp-content/uploads/2014/05/Quotes-Nelson-Mandela2.jpg" /> </div>
<div class="footer">footer</div>
</div>
</div>
CSS
CSS
body {
margin: 0;
padding: 0;
font: 90%/130% Arial, Helvetica, sans-serif;
text-align:left;
}
.page{margin: 0 auto;width: 90%;}
.wrapper {
float:left;
border: 1px solid red;
}
.left, .center, .right {
float: left;
width: 30%;
}
.left {
border: 1px solid green;
}
.right{border:1px solid black; text-align:right;}
.right img{ text-align:right;}
.left img, .right img {
width: 100%;
height: auto
}
.footer{ clear:both;}
Live Demo Link to better understand
http://codepen.io/ ashis hbhatt/pen/wLeFI[^]
这篇关于当页面重新调整大小或放大时，div会下降的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
