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宽度。

只需更改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 *的概念

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

1 个答案: