我正在尝试为我的托管公司制定每个计划的网格。但我无法弄清楚一件事。对于我的托管网格,如何让中间的项目看起来比其他两个更大?
代码段:
.Hosting {
list-style-type: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
.Hosting>li {
display: inline-grid;
width: calc(33% - 15px);
-moz-box-shadow: 0 0 20px #c3d7ef;
-webkit-box-shadow: 0 0 20px #c3d7ef;
box-shadow: 0 0 20px #c3d7ef;
background: #FFF;
padding: 20px;
border-radius: 4px;
margin: 5px;
}
<ul class="Hosting">
<li>
<h2>
Small
<small>10.99€</small>
</h2>
<ul>
<li><i class="fa fa-check"></i> Item</li>
</ul>
<a href="" class="Order"><button>Order Now</button></a>
</li>
<li>
<h2>
Small
<small>10.99€</small>
</h2>
<ul>
<li><i class="fa fa-check"></i> Item</li>
</ul>
<a href="" class="Order"><button>Order Now</button></a>
</li>
<li>
<h2>
Small
<small>10.99€</small>
</h2>
<ul>
<li><i class="fa fa-check"></i> Item</li>
</ul>
<a href="" class="Order"><button>Order Now</button></a>
</li>
</ul>
我试图设置它们的高度和边距,但它似乎不起作用。因为它是内联网格,但我相信这是展示我的计划的最佳方式?我不喜欢使用花车。
有关如何实现这一目标的任何想法吗?
答案 0 :(得分:1)
对要显示比其他两个更大的项目使用css属性transform:scale(1.2)
!!