phpstudy集成环境

 首页 > 关于一个响应式的布局的问题？

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

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

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

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

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

可以试试rem

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

假设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-grow或flex-shrink属性就行了。具体请自行搜索。

补充一个，用JS写。

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

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

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

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

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

flex布局你值得拥有

calc 加百分比

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

absolute百分比定位

【热门文章】
【热门文章】