当用户放大或缩小时，网站元素变得混乱。我如何阻止他们移动？

Question

因此，我一直在设计一个网站并设计首页，使用填充将所有内容很好地居中没有问题。 我终于以我想要的中心方式获得了所有东西。 然后我意识到缩小页面时，事情朝两个方向发展。 我的“照相馆”在右边，而其中包含信息的主表在左边。 现在我知道这是因为元素被指定为浮动或右/左对齐。 但是，如果您愿意，我需要知道如何使它们在不同的缩放比例下保持比例。 提前致谢！ 这是代码：

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;
}

Answer 1

解决此问题的最佳方法是使用％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;
}

*注意：您可能想使用数字来获得一个完美的网页，我刚刚提供了一些随机数字以帮助您了解％宽度的概念*

当用户放大或缩小时，网站元素变得混乱。我如何阻止他们移动？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-07-30 03:17:20

当用户放大或缩小时，网站元素变得混乱。 我如何阻止他们移动？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-07-30 03:17:20

当用户放大或缩小时，网站元素变得混乱。我如何阻止他们移动？

解决方案1
0 已采纳 2015-07-30 03:17:20