Div+CSS如何将一行的布局分成很多个列?

.wrapper { width: 100%; /* 也可以固定宽度 */ height: 200px;} .wrapper > div { display: inline-block; /* 如需支持IE8以下版本,用浮动来做 */ width: calc(100% / 3); /* 此处运用了一个css3的表达式,将div三等分,IE8及以上可以支持,当然也可以根据需要设...
Div+CSS如何将一行的布局分成很多个列?
<div class="wrapper">
<div></div><!-- 此处的注释为去掉换行符的影响
--><div></div><!--
--><div></div>
</div>

.wrapper {
width: 100%; /* 也可以固定宽度 */
height: 200px;

}
.wrapper > div {
display: inline-block; /* 如需支持IE8以下版本,用浮动来做 */
width: calc(100% / 3); /* 此处运用了一个css3的表达式,将div三等分,IE8及以上可以支持,当然也可以根据需要设置固定值 */
width: -webkit-calc(100% /3);
width: -moz-calc(100% / 3);
height: 100%;
}

以上经亲自测过,IE8+、chrome、firefox表现良好。2018-02-05
mengvlog 阅读 7 次 更新于 2025-07-20 10:09:02 我来答关注问题0
  • div+css做页面的一行两列布局,首先我们是需要三个div的,第一个div包裹着其他的2个div,然后给那2个div设置float属性和width,height,最好是给个border利于布局的时候方便观察,这里举个例子: div1{ width:960px; //通过id来控制 height:600px;} .left{ width:400p...

  • --> .wrapper { width: 100%; /* 也可以固定宽度 */ height: 200px;} .wrapper > div { display: inline-block; /* 如需支持IE8以下版本,用浮动来做 */ width: calc(100% / 3); /* 此处运用了一个css3的表达式,将div三等分,IE8及以上可以支持,...

  • 【答案】:CSS+DIV布局的常用方法有三种:一、 常规流式布局 元素按照自身的常规显示方式显示,有两个特点:1.元素按照自身HTML元素定义的位置显示(怎么写的怎么显示)2.元素按照自身的常规显示特性显示,比如块级元素垂直排列,行级元素水平排列。二、 浮动 具体代码:左浮动 float:left;右浮动 float:...

  •  武汉誉祥科技 如何实现多个div横排列

    第一种方法是利用CSS的display属性。默认情况下,div元素的display属性值为block,这意味着它们会在各自的行内显示,即一个div占据一行。为了实现多个div在同一行内显示,我们可以将div的display属性设置为inline。这样,多个div就会在同一行内横向排列。第二种方法则是使用float属性。float属性可以指定元素的...

  •  武汉誉祥科技 div怎么左右布局

    1、我们先做的是插入两个div标签,点击【插入】,找到【布局对象】—【Div标签】。2、先创建第一个长宽均为200px的div标签,类命名为“1”。3、再先创建第二个长宽均为200px的div标签,类命名为“2”。4、我们可以看到两个div标签的状态是上下并排。5、然后再双击右边的CSS样式窗口内其中一个标签...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部