84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
一个页面,一行放5个元素(横向布局)。1,怎样让这些元素在页面尺寸不断变小的时候width不变,而之间的margin不断变小。2,怎样让这些元素在页面尺寸不断变小的时候width变小,而之间的margin不变呢。
我以前都是百分比布局,不知这种效果该如何实现?
业精于勤,荒于嬉;行成于思,毁于随。
假设HTML如下:
<p class="container"> <p></p> <p></p> <p></p> </p>
只要弹性盒就行了。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 p { /* 子元素只要按照一般情况来设置就行了,不必特别添加display、float等属性 */ }
普通地使用百分比就行了,除此之外还可以也可以使用上面说的弹性盒,只要在子元素上加上flex-grow或flex-shrink属性就行了。具体请自行搜索。
flex-grow
flex-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个元素,添加一个父级p,并设置p的宽度和margin:0 auto;
<style> #container{ width:980px; margin:0 auto; text-align:center; } .obj{ display:inline-block; *zoom:1; *display:inline; } </style> <p id="container"> <p class="obj">obj</p> <p class="obj">obj</p> <p class="obj">obj</p> <p class="obj">obj</p> <p class="obj">obj</p> </p>
答案2:让宽度不断变化,就用百分比就可以了。
假设HTML如下:
对于1:
只要弹性盒就行了。CSS如下:
对于2:
普通地使用百分比就行了,除此之外还可以也可以使用上面说的弹性盒,只要在子元素上加上
flex-grow
或flex-shrink
属性就行了。具体请自行搜索。只能js监听resize事件,重新设置他们的大小。
ABABA A定宽 B变宽 display:flex 这样ABABA撑满全屏 A不变 B可以动
1和2就是A和B怎么用的吧
这样行么
有两种办法
flex布局
百度比布局
absolute百分比定位
同楼上的js控制style
也可以用css media 控制
width 可以给一个最大值和最小值来固定。
calc 加百分比
css 中有
`
@media
//这样的属性
`
你可以去看看bootstrap 对应的实现,他是掐死了 4个固定的大小,去改变的。不用做太小级别的缩小
可以试试rem
答案1:
思路在于给那5个元素,添加一个父级p,并设置p的宽度和margin:0 auto;
答案2:
让宽度不断变化,就用百分比就可以了。