檬味博客 » 问答 » div+css中如何将一行的布局分成很多个列

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表现良好。2013-01-07
1：桶。
做几个并排的div，float，占满。然后往这几个div里填子元素。
2：绝对定位
对每个子元素相对父容器绝对定位，拼到一起。
3：float
在资源度宽高相同的情况下，子元素一起float，最后clear一下。2013-01-08
一行分成多行吧，看你是什么元素啊，块级元素默认都是独占一行的。只要你设置不浮动。你如果要把很多个块排成一行就得设置浮动。2013-01-09
加上display：block，变成块级元素就可以了，不要加float：left或者float：right2013-01-08
用table吧
别老纠结div什么的
结合才是硬道理2013-01-08
mengvlog 阅读 29 次 更新于 2025-08-12 01:36:47 我来答关注问题0
5 个回答檬味博客专题活动
  • tatooo div+css中如何将一行的布局分成很多个列

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

  • v6gogo div+css如何做页面的一行两列布局

    div+css做页面的一行两列布局，首先我们是需要三个div的，第一个div包裹着其他的2个div，然后给那2个div设置float属性和width，height，最好是给个border利于布局的时候方便观察，这里举个例子： div1{ width:960px; //通过id来控制 height:600px;} .left{ width:400p...

  • 考试资料网 简述CSS+DIV布局的常用方法。

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

  • 放逐的天歌 DIV+CSS 问题,如何设置同一行,左中右的排列

    （3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。（4）你可以轻松地控制页面的布局 。（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变...

  • 幻翼高达Zero 怎样让div标签在一行?

    需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的标签中，输入css代码：span{display: inline} input{display: inline}。3、浏览器运行index.html页面，此时span和input成功排列在同一行。

其他CSS类似问题

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

CSS相关话题

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