0

一些警告：除非有办法防止在屏幕最小化时浮动“下”，否则请不要浮动解决方案。

另外，我更喜欢使用 % 而不是 px。提前致谢！

我的首选代码将是这样的（虽然它不起作用）：

.col {
position: relative; 
width: 20%; 
height:100%;}

<div style="width: 960px; height: 1000px;">
   <div class="col">Column 1</div>
   <div class="col" style="left:20%; top:-100%;">Column 2</div>
   <div class="col" style="left:40%; top:-200%;">Column 3</div>
   <div class="col" style="left:60%; top:-300%;">Column 4</div>
   <div class="col" style="left:80%; top:-400%;">Column 5</div>
</div>

如前所述，这没有我想要的效果。但是，如果我将 top 从 % 更改为 px，它会起作用。

例子：

<div style="width: 960px; height: 1000px;">
   <div class="col">Column 1</div>
   <div class="col" style="left:20%; top:-500px;">Column 2</div>
   <div class="col" style="left:40%; top:-1000px;">Column 3</div>
   <div class="col" style="left:60%; top:-1500px;">Column 4</div>
   <div class="col" style="left:80%; top:-2000px;">Column 5</div>
</div>

我哪里错了？Left 工作正常，但 top 不...！

好的，重申我所追求的，我想要 5 个等高的列并排，使用 % 而不是 px，不使用浮点数，除非在调整屏幕大小时可以使用浮点数而不在列中进行任何移动。

再次感谢！

更新 - 我想真正困扰我的是为什么 left % 工作得这么好，但 top % 没有。

4

0 回答 0