当用户放大或缩小时，网站元素会变得混乱.我怎样才能不让它们移动

所以我一直在设计一个网站，并设计了一个没有问题的首页，使用填充来很好地居中。我终于把所有东西都做成了我想要的居中。然后我意识到，当我把页面缩小时，事情有两个方向。我的"图片库"向右移动，包含信息的主表格向左移动。现在我知道这是因为元素被指定为浮动或左右对齐。然而，我需要知道如何使他们保持比例在不同的缩放，如果你愿意。提前感谢!下面是代码:

HTML:

<HTML>
<Center>
<Body>
 </Center>
 <div class="gallery" align="right">
 <img src="photo-gallery.jpg" width="225" Height="200"> <Br>
 <center>
 <a href="Photo-Gallery.php" class="myButton">Photo Gallery</a>
 </center>
 </div>
 <Div class="front" align="left">
 <table border="5">
 <tr>
 <th>
 (TEXT)
 </th>
 </table>
 <table border="5">
 <td> 
 <p>
 (TEXT)
 </P>
 <Td>
    </tr>
</table>
</div>
</Body>

CSS:

table {
width: 600px;
font-size: 35px;
background-color: #e5e2d9 ;
border-color: #444;
}
.gallery {
padding-left: 0;
padding-right: 475px;
width: 225;
height: 200;
display: inline-block;
float: right;
position: relative; 

} 
.front {
padding-left: 439px

}
p {
font-size: 20px;
}

解决这个问题的最好方法是使用% width/padding代替px width。

修改你的CSS:

table {
width: 60%;/*Check note below*/
font-size: 35px;
background-color: #e5e2d9 ;
border-color: #444;    
}
.gallery {
padding-left: 0;
padding-right: 20%; /*Check note below*/
width: 225;
height: 200;
display: inline-block;
float: right;
position: relative;  
} 
.front {
padding-left: 20% /*Check note below*/
}
p {
font-size: 20px;
}

*注意:你可能想玩周围的数字得到一个完美的网页，我只是提供了一些随机数字，以帮助您理解% width *

的概念

相关内容

最新更新

热门标签：