关于一个响应式的布局的问题?

一个页面,一行放5个元素(横向布局)。
1,怎样让这些元素在页面尺寸不断变小的时候width不变,而之间的margin不断变小。
2,怎样让这些元素在页面尺寸不断变小的时候width变小,而之间的margin不变呢。

我以前都是百分比布局,不知这种效果该如何实现?

阅读 7k
13 个回答

假设HTML如下:

<div class="container">
    <div></div>
    <div></div>
    <div></div>
</div>

对于1:

只要弹性盒就行了。CSS如下:

.container {
    display: flex; /* 弹性盒,webkit私有属性的值是-webkit-flex */
    justify-content: space-around; /* 设置在子元素周围添加空白,webkit私有属性的名称是
                                      -webkit-justify-content,space-around是指
                                      在每个子元素两边添加一样的空白(和margin的效果类
                                      似),此外还有space-between(只在子元素之间添
                                      加空白,最两端的子元素外没有空白)、center(子元
                                      素居中)、flex-start(子元素左对齐,默认值)、
                                      flex-end(子元素右对齐) */
    flex-wrap: wrap; /* 设置父容器宽度不够时子元素的换行表现,webkit私有属性名称是
                        -webkit-flex-wrap,wrap表示换行,no-wrap表示不换行(默
                        认值),wrap-reverse表示换行但方向不同(从前往后,超出使先
                        从第一个元素之后换行) */
}
.container div {
    /* 子元素只要按照一般情况来设置就行了,不必特别添加display、float等属性 */
}

对于2:

普通地使用百分比就行了,除此之外还可以也可以使用上面说的弹性盒,只要在子元素上加上flex-growflex-shrink属性就行了。具体请自行搜索。

只能js监听resize事件,重新设置他们的大小。

ABABA A定宽 B变宽 display:flex 这样ABABA撑满全屏 A不变 B可以动
1和2就是A和B怎么用的吧
这样行么

有两种办法
flex布局
百度比布局

absolute百分比定位

同楼上的js控制style
也可以用css media 控制

@media screen and (max-width: xxx px) {
  .selector{
    width:width;
    }
}

width 可以给一个最大值和最小值来固定。

calc 加百分比

css 中有
`
@media
//这样的属性
`
你可以去看看bootstrap 对应的实现,他是掐死了 4个固定的大小,去改变的。不用做太小级别的缩小

可以试试rem

答案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:
让宽度不断变化,就用百分比就可以了。

flex布局你值得拥有

补充一个,用JS写。

你应该把百分比栅格单独做个容器,列表项放栅格里面,那么把它内部的基础结构固定宽度,margin自然就是随着大容器变化而变化,反之就是固定间距。然后就都解决了,不用flex布局啊之类的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题