怎样让连续的多个DIV浮动两个排成一列?

怎样让连续的多个DIV浮动两个排成一列?,第1张

清除浮动才可以的!你这左浮动的话,如果width宽度为1000px的话,加float:left的话 他会把宽度填充满了,再往第二行排列!所以要清除浮动!希望你满意,我给你的是解释,不是代码!代码给你的话太笼统了,不方便你理解!

解决方法:
给每个div加上代码: style="display: inline;"
就可以在一行内显示四个div。
div简介:
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。

/stylecss/
clearfix:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden;}
outer{margin:0 auto;width:100%;height:100%;}
column_l{width:60%;float:left;}
column_l top{width:100%;}
column_l bottom{width:100%}
column_r{width:40%;float:left;}
<div class="outer clearfix">
    <div class="column_l">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
    <div class="column_r"></div>
</div>

大致是你图上的样子,只是粗略的写了个框架

至于你说的文章列表,有缩略图和没有缩略图的建议你写两个样式,带缩略图的写一个,不带的写一个如果你要是不写两个样式,那可以使用js动态的去改变

给你个例子:
<body>
<div id="container">
<div id="sidebar">This is the sidebar</div>
<div id="content">this is the right</div>
</div>
</body>
#container {margin:0 auto; width:900px;}
#sidebar { float:left; width:200px; height:500px; background:#6cf;}
#content { float:right; width:695px; height:500px; background:#cff;}/因为是固定宽度,采用左右浮动方法可有效避免ie 3像素bug/

bieshu bieshu2 bieshu3都加上
overflow:hidden 试试
另外LZ下次把代码发全了 。你的ul的格式没清除(list-style-type:none)
然后边距也没调({ padding:0px; margin:0px;})
看着真别扭

css3的transform属性允许我们旋转、缩放和移动元素。可以通过给它传递一个rotate(度数)值来旋转一个元素,正值表示顺时针方向旋转,负值表示逆时针方向旋转,旋转的中心点为元素的中心。

CSS代码如下:

rotate{

-ms-transform:rotate(90deg);/IE9/

-moz-transform:rotate(90deg);/Firefox/

-webkit-transform:rotate(90deg);/SafariandChrome/

-o-transform:rotate(90deg);/Opera/

}

浏览器支持:Firefox4、Oprea10、Safari31、Chrome8、IE9


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13404644.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-29
下一篇 2023-07-29

发表评论

登录后才能评论

评论列表(0条)

保存