DIV+CSS控制,两层的DIV嵌套,用一个样式让内层DIV在外层DIV中纵向循环显示。

DIV+CSS控制,两层的DIV嵌套,如写上float:left则内层在外层中横向循环,到右边自动转到下一行。现在我想实现纵向的这一效果,外层是写死了高度的,内层先一个一个往下排,到外层的底部后再从侧重起一列。
图中横排是我能够实现的效果,内层DIV写法是<div style="width:100px; height:100px;float:left;"></div>。
竖排是我没有实现的效果,求一个统一的内层DIV样式实现该效果。

只能通过JS脚本来弄,样式无法做到,想实现的话那就在再作div的嵌套,利用123嵌入一个div内,4再嵌入一个div内

其实楼主的想法是完全没有意义的,怎么说呢,因为绝大部分页面我们只要求宽度自适应,就如楼主所提到的第一个横排换行,可以根据float:left样式属性来布局,页面窄了就换行,宽了下排的就补上去,从而达到页面的美观;还有就是用户使用浏览器的习惯,鼠标滚轮是可以让页面上下滚动的,虽然左右滚动也可以,但是需要按住滚轮来操作,这个大部分用户是不习惯使用的,有滚动都是通过拖动滚动条来浏览;当然为什么样式只有横向可以换行一时半会也说不清楚,原因有很多,其中人们的操作习惯很重要
楼主的第二个想法已经说明楼主已经在认真的学习了,对于这个问题的思考是值得表扬的,不过楼主不用再继续考虑这个问题了,你做页面只需要关注横向就行了追问

是这样,我现在要实现的页面类似于windows桌面的效果,前提条件是:1、内层DIV数量是外层DIV的指定大小范围内完全能容纳下的;2、外层DIV的大小是固定的;3、内层DIV的要求是竖向排列(即右侧未实现的竖排效果)。希望能够通过一个统一的css样式实现,这种想法是不可能实现的是吗?

追答

就我所知的css来看,你想实现只能分开来写了,写在同一个div内是无法办到的
因为目前标签的位移样式就2种
1、默认的自动换行,即使固定了宽度也还是会换行,除非有标签加入样式,否则不会出现同一个标签内一行出现2个标签的现象,如div标签、table标签之类的
2、同一行默认跟随,比如a标签、span标签之类的,就好像是加入了float:left样式一样。当标签宽度超过父级宽度,如果无法撑开父级那么就会自动换行,css样式要么是左浮动要么是右浮动

楼主想要的效果确实css无法实现的

温馨提示:内容为网友见解,仅供参考
无其他回答

DIV+CSS控制,两层的DIV嵌套,用一个样式让内层DIV在外层DIV中纵向循环...
只能通过JS脚本来弄,样式无法做到,想实现的话那就在再作div的嵌套,利用123嵌入一个div内,4再嵌入一个div内 其实楼主的想法是完全没有意义的,怎么说呢,因为绝大部分页面我们只要求宽度自适应,就如楼主所提到的第一个横排换行,可以根据float:left样式属性来布局,页面窄了就换行,宽了下排的就...

怎么将2个DIV嵌套在1个DIV里面呢?
1、首先如图所示的web结构即一个html和css即可实现。2、打开html页面 定义一个大的div和两个小div 如图所示。3、最常用的float浮动,只要两个小div的宽度小于等于大div的宽度,即可实现并排了。4、使用position进行绝对定位,然后使用margin-left除去第一个小div的宽度即可。5、使用table盒子实现div并排,...

CSS如何控制 2个div 的 部分 重叠在一起 并将其中一个div的内容固定显 ...
重叠在一起需要改变默认的布局方式,将其中一个显示在上层需要设置深度顺序,这两点分别用如下样式完成 position: absolute; \/*设置为绝对定位*\/z-index:999; \/*设置重叠的上下次序,值越大月在上方*\/示例如下 创建Html元素 <div class="top"><div class="b">我是绝对定位,并且重叠在上方<\/di...

div+css 怎么让一个小div在另一个大div里面 垂直居中
方法一、小div绝对定位或相对定位,这样小div脱离标准流,大div有固定宽高,用小div的margin去挤大div <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Title<\/title><style> .father{ width: 600px;height: 600px;background-color: orangered;} .son{ width: 300px;height: 200...

在div+css中如何让两个元素的层级关系改变,z-index,不是很好使……
一种方法是使用标签的自然顺序和嵌套顺序来形成合理的布局。而第一种方法却不是万能的,有时候我们需要将原本位于下层的元素移到另一个元素上方,那可以使用z-index;而你说的不好用,则是zindex没有生效,没生效就是没有定义position属性,如果不想让元素的位置有所变化,就给赋予z-index属性的元素加...

在DIV里怎么用CSS控制该DIV内一行字的纵向对齐方式?
1、选中要对齐的DIV。2、点击右侧CSS选项卡下的添加属性,如下图 3、在新添加属性名称下选择:line-height,4、中间的数值框内填上数字,这个数值必须要和这个DIV的height属性值一样,才能使文字纵向居中,5、第三个框中选择px。确认 6、或者直接在代码视图下的div中的style样式中添加line-height:100...

css多个div在同一行;html两个div同一行
在html代码页面上创建两个div标签,然后给这个两个div标签添加class类,案例中class类分别为:one,two。 创建div代码: div class="one"第一个div\/div div class="two"第二个div\/div 创建style标签,设置class类one,two样式。需要设置宽、高、浮动、边框以及box-sizing属性。

在HTML中,如何让两个DIV在同一行显示?
把两个div放在一个父div里面,然后进行浮动即可。下面我们一起来实现以下:创建一个父div,然后创建两个子div,代码如下:给div加上css样式,分别给他们设置背景颜色,父div可以不设置,子div设置绿色,然后给div加上浮动代码即可,"float:left"我们来写一下代码:下面我们来看一下运行效果 DIV是层叠样式...

div+css 为什么div内的div总会溢出,怎么解决
两个一样的杯子,谁也装不下谁,只有一个大一个小,才能有一个被装的下,硬装的话肯定会被撑的变形。如果你里面的div用了绝对大小,是有可能超出去的,不过在外div 加上 overflow:hidden 就不会有超界了.

在使用div+css时,代码明明写到了div中为什么显示在div层的外面。 代 ...
因为你<ul>使用了float:left,使用了左浮动或右浮动后,元素就好像游离在层之外了,解决的办法是在适当的地方加上清除浮动的语句。比如你的代码中,在最后一个<\/ul>标记后面加上<div style="clear:both"><\/div>。<\/ul> <div style="clear:both"><\/div> <\/div> <\/div> <\/body> ...

相似回答