- 首页
- 前端开发
- 固定定位 div 内的响应式完美正方形.有人可以帮助我吗?
固定定位 div 内的响应式完美正方形.有人可以帮助我吗?
[英] Responsive perfect squares inside a fixed positioned div. could anyone help me?
本文介绍了固定定位 div 内的响应式完美正方形.有人可以帮助我吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的网页底部有一个固定定位的 div(仅面向移动设备).在里面我有 5 个链接，我希望这些链接总是完美的正方形，但我想避免使用任何固定大小，所以我总是尝试使用%".这些正方形需要始终使用容器的整个宽度进行分布.
html 如此简单:
和我的 css 到目前为止:
.container {宽度:90%；高度:20%；位置:固定；底部:5%；左:5%；溢出:隐藏；}.container a {宽度:18.4%；右边距:2%；高度:100%；背景颜色:蓝色；向左飘浮;}.container a:last-child {margin-right: 0;}
这里有 jsfiddle:http://jsfiddle.net/7jJsf/3/
那么，无论浏览器的宽度或高度如何，是否有可能使链接成为完美的正方形?
或者，如果我的方法不够好，还有其他方法可以做到吗?
注意:我想我可以在每个链接中使用方形 img 来做到这一点，但我很想避免使用不必要的图像.
预先感谢并原谅我的英语，希望问题足够清楚.
解决方案
我已经在这里回答了这个问题.此解决方案使用虚拟 div 和 position: absolute; 来制作保持纵横比的响应元素.这是一个 CSS 解决方案.
为了适应您的情况，您可以这样做:
FIDDLE
HTML:
<div class="wrap"><div class="dummy"></div><a href="#" class="facebook"></a>
<div class="wrap"><div class="dummy"></div><a href="#" class="info"></a>
<div class="wrap"><div class="dummy"></div><a href="#" class="contacto"></a>
<div class="wrap"><div class="dummy"></div><a href="#" class="telefono"></a>
<div class="wrap"><div class="dummy"></div><a href="#" class="galeria"></a>
CSS:
.container {宽度:90%；位置:固定；底部:5%；左:5%；}.container .wrap {向左飘浮;位置:相对；宽度:30%；边距:1%；宽度:18.4%；右边距:2%；高度:100%；向左飘浮;}.container .dummy {保证金最高:100%；}.container a {显示:块；位置:绝对；顶部:0；底部:0；左:0；右:0；背景颜色:蓝色；}.container>div:last-child {右边距:0；}
I have a fixed positioned div at the bottom of my web (oriented just for mobiles). Inside I have 5 links, and I would like these links to be perfect squares always but I want to avoid to use any fixed size so I'm trying always to use "%". These squares needs to be always distribute using the full width of the container.
html so simple:
<div class="container">
<a href="#" class="facebook">
</a>
<a href="#" class="info">
</a>
<a href="#" class="contacto">
</a>
<a href="#" class="telefono">
</a>
<a href="#" class="galeria">
</a>
</div>
and my css's so far:
.container {
width:90%;
height:20%;
position:fixed;
bottom:5%;
left:5%;
overflow:hidden;
}
.container a {
width: 18.4%;
margin-right: 2%;
height:100%;
background-color: blue;
float:left;
}
.container a:last-child {margin-right: 0;}
Here you have the jsfiddle: http://jsfiddle.net/7jJsf/3/
So, could it be possible to make the links perfect squares whatever width or height the browser have?
or, if maybe my aproach is not good enough, any other way to make it?
note: I think I could do it probably using a square img inside every link but I would love to avoid the use of innecesary images.
thanks in advance and excuse my english, hope the question is clear enough.
解决方案
I have already answered this issue here.
This solution uses a dummy div and position: absolute; to make responsive elements that keep their aspect ratio. This is a CSS solution.
To adapt it to your situation, you can do this :
FIDDLE
HTML :
<div class="container">
<div class="wrap">
<div class="dummy"></div>
<a href="#" class="facebook"></a>
</div>
<div class="wrap">
<div class="dummy"></div>
<a href="#" class="info"></a>
</div>
<div class="wrap">
<div class="dummy"></div>
<a href="#" class="contacto"></a>
</div>
<div class="wrap">
<div class="dummy"></div>
<a href="#" class="telefono"></a>
</div>
<div class="wrap">
<div class="dummy"></div>
<a href="#" class="galeria"></a>
</div>
</div>
CSS :
.container {
width:90%;
position:fixed;
bottom:5%;
left:5%;
}
.container .wrap {
float:left;
position: relative;
width: 30%;
margin-right:1%;
width: 18.4%;
margin-right: 2%;
height:100%;
float:left;
}
.container .dummy {
margin-top: 100%;
}
.container a {
display:block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: blue;
}
.container>div:last-child {
margin-right: 0;
}
这篇关于固定定位 div 内的响应式完美正方形.有人可以帮助我吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
