Question

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

另外，我更喜欢使用％而不是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>

如上所述，这没有我所追求的效果。但是，如果我将顶部从％更改为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>

我哪里错了？左边工作正常，但顶部没有......！

好的，为了重申我所追求的，我想要5个相等高度的列，并排，使用％而不是px，不使用浮点数，除非浮点数可以在屏幕上没有任何移动的情况下使用调整大小。

再次感谢！

更新 - 我想那真正让我感到烦恼的是为什么左边的％可以很好地工作，但是前面的％没有。

使用DIV位置相对和顶部以％表示实现相等高度列的问题

0 个答案: