html - 我怎样才能使它的高度更大？

Question

我有这个网站:

link

在此页面上，您会找到您的产品包装盒……我希望它们能提高 10%。

我放一张图明白我的意思。

http://i57.tinypic.com/11rvjhj.jpg

<ul class="products-grid one_column_4">
    <li class="item">
        <div class="regular">//some code HTML</div>
        <div class="hover">//some code HTML</div>
    </li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

代码 CSS:

.products-grid li.item { 
    float:left; 
    width:252px; 
    padding:0;
    margin:0 15px 30px; 
    position:relative;
    background:#fff; 
    border:9px solid #fff; 
    border-radius:3px;
    -webkit-border-radius:3px; 
    -moz-border-radius:3px;
    -webkit-box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.15);
    box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.15);
    height:350px;    //I add this code
}

我尝试了上面的代码，但看看它们看起来如何......不太好。

http://i57.tinypic.com/33zck8j.png

你能告诉我如何在不影响其余内容的情况下让盒子变高吗？

Answer 1

我的解决方案是在元素周围使用一个 div，并将元素的高度设置为 100%。 您可以使用 View 高度单位(参见此处:http://www.w3schools.com/cssref/css_units.asp)

vh 或 vw 参数强制元素的高度或宽度。 1vh 对应于屏幕 View 的 1%。但是，如果您更改窗口的大小，它会更改元素的大小，直到达到 vmin 参数。