给每个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
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）