Question

请问如何使用CSS+DIV实现类似这样的布局，本人菜鸟，还请好心人可以结合实例详细讲解一下，万分感谢！

除了最上面的框上方无空隙之外，所有黑框上下左右全都有空隙

Answer 1

这是div布局当中比较常用到的，不是很复杂代码如下：

样式部分：

<style>

*{ padding:0; margin:0}

.main{ width:500px; text-align:center}

.head{ height:50px; background-color:#0F0; margin-bottom:10px;}

.left{ width:245px; float:left; height:250px; background-color:#00F}

.right{ width:245px; float:right;}

.right li{ background-color:#FF0; width:76px; float:left; height:120px; list-style:none; margin-left:5px; margin-bottom:10px;}

</style>

 

框架部分：

<div class="main">

   <div class="head">head</div>

   <div class="left">left</div>

   <ul class="right">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

   </ul>

</div>

如图：

 

自己再亲手试下，希望对你有帮助！

Answer 2

按上面步骤自己动手。

Answer 3

<style>
<!--
#al{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#st{
background-color:#777;
}
#sm{
background-color:#777;
margin:5px;
width:45%;
height:400px;
}
#as{
float:left;
width:25%;
height:200px;
background-color:#777;
margin:5px;
}
-->
</style>

<div id="al" >
<div id="st" >上部分</div>
<div>
<div style="float:right; clean:both;width:50%"><!--右边模块上三块 -->
<div id="as">第一</div><div id="as">第二</div><div id="as">第三</div>

<div id="as">第四</div><div id="as">第五</div><div id="as">第六</div>

</div>
<div id="sm" style="float:left" >
左边模块
</div>
</div>
</div>
宽高自己控制，width:45%;
height:400px; 前面两单词认识吧

Answer 4

这样的效果需要两个大div作为框架，第二个div里，作浮动效果即可。
<div></div>
<div>
<div style=“float:left;”></div>
<ul style=“float:left;”>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>

</div>

Answer 5

你用好 float:left ，div就横向排列了