gpt4 book ai didi

HTML/CSS 居中灵活尺寸布局

转载 作者:行者123 更新时间:2023-11-28 16:12:06 25 4
gpt4 key购买 nike

我需要创建一个着陆页,其中包含顶部带有文本的图像、图像下方的几个视频以及我需要的 2 像素的带状线图像,因此请将其固定在底部。

<html>
...
<body>

<img src="topimage.png" alt="" />

<table>
<tr>
<td>Video 1 here</td>
<td>Video 2 here</td>

<img src="2pixelhightimage.png" alt="" />

我基本上需要它居中并相对于屏幕大小看起来所以基本上调整大小以补偿屏幕分辨率。

我该怎么做?

最佳答案

您可以通过向您的内容添加包装器并将左右边距设置为自动来轻松地完成此操作。使用 % 而不是像素。

<div class="wrapper">

<img src="topimage.png" alt="">

<!-- No need to use table here. Just use divs for layout stuff. -->
<table>
<tr>
<td>Video 1 here</td>
<td>Video 2 here</td>
</tr>
</table>

<img class="fixed" src="2pixelhightimage.png" alt="">

</div>

然后是 CSS:

.wrapper { margin: 0 auto;}
img { max-width:100%; height:auto;}
.fixed {position:fixed; bottom:0;}

关于HTML/CSS 居中灵活尺寸布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20517633/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com