一个页面,一行放5个元素(横向布局)。
1,怎样让这些元素在页面尺寸不断变小的时候width不变,而之间的margin不断变小。
2,怎样让这些元素在页面尺寸不断变小的时候width变小,而之间的margin不变呢。
我以前都是百分比布局,不知这种效果该如何实现?
一个页面,一行放5个元素(横向布局)。
1,怎样让这些元素在页面尺寸不断变小的时候width不变,而之间的margin不断变小。
2,怎样让这些元素在页面尺寸不断变小的时候width变小,而之间的margin不变呢。
我以前都是百分比布局,不知这种效果该如何实现?
同楼上的js控制style
也可以用css media 控制
@media screen and (max-width: xxx px) {
.selector{
width:width;
}
}
width 可以给一个最大值和最小值来固定。
答案1:
思路在于给那5个元素,添加一个父级div,并设置div的宽度和margin:0 auto;
<style>
#container{
width:980px;
margin:0 auto;
text-align:center;
}
.obj{
display:inline-block;
*zoom:1;
*display:inline;
}
</style>
<div id="container">
<div class="obj">obj</div>
<div class="obj">obj</div>
<div class="obj">obj</div>
<div class="obj">obj</div>
<div class="obj">obj</div>
</div>
答案2:
让宽度不断变化,就用百分比就可以了。
你应该把百分比栅格单独做个容器,列表项放栅格里面,那么把它内部的基础结构固定宽度,margin自然就是随着大容器变化而变化,反之就是固定间距。然后就都解决了,不用flex布局啊之类的
10 回答11.1k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
5 回答1.9k 阅读
假设HTML如下:
对于1:
只要弹性盒就行了。CSS如下:
对于2:
普通地使用百分比就行了,除此之外还可以也可以使用上面说的弹性盒,只要在子元素上加上
flex-grow
或flex-shrink
属性就行了。具体请自行搜索。