育才学习网1.css的div控制折行一行有5个怎么写
假设图片的宽度为100px，高度为50px；那么5张就是500px，如果在加上图片之间的距离，比如每张之间为10px，那么总的宽度就是500px+40px=540px；那么你的div宽度可以设置540px；或者更大点也行！我以7张图片为例！
<head>
<style type="text/css">
div{width:540px;overflow:hidden;}
div img{width:100px;height:50px;display:block;float:left;margin-left:10px;}
div img.first{margin-left:0px;}
</style>
</head>
<body>
<div>
<img class="first" src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
</div>
</body>
2.在HTML中,如何让两个DIV在同一行显示
在HTML中，让两个div在同一行显示的方法：
1、使用浮动float
代码：
<html>
<head>
<meta ; charset=utf-8" />
<title>div同行显示</title>
<style type="text/css">
#container{overflow: hidden；}/* 清除浮动 */
#container div{width:200px;height:100px;}
.box1{background: red;float: left;}
.box2{background: green;float:left;}
</style>
</head>
<body>
<div id ="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body>
</html>
效果：
2、inline-block将这两个div变成内联-块状元素
代码：
<html>
<head>
<meta ; charset=utf-8" />
<title>div同行显示</title>
<style type="text/css">
body{background: #ddd;}
div{width:200px;height:100px;display: inline-block;}
.box3{background: #e4007e;}
.box4{background: blue;}
</style>
</head>
<body>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>
效果：
3.DIV+CSS一行三列代码如何写
大概的结构如下：
<div>
<div class=“left”><；！-----左边盒子----->
<ul>
<li>；条目1</li>
<li>；条目2</li>
<li>；条目3</li>
……
</ul>
</div>
<div class=“middle”><；！-----左边盒子----->
<ul>
<li>；条目1</li>
<li>；条目2</li>
<li>；条目3</li>
……
</ul>
</div>
<div class=“right”><；！-----右边边盒子----->
<ul>
<li>；条目1</li>
<li>；条目2</li>
<li>；条目3</li>
……
</ul>
</div>
</div>
需要注意：1）同列的这三个盒子，使用float浮动：如，float:left；这样就可以在一行排列顺次排列。
也可以对left盒子使用float:left；，右边的盒子使用float:right;
2）最外边的div盒子的宽度要大于同列的3个盒子总宽度，如果小了，则会被挤下来，不是在一行中显示。
4.两个div怎么在同一行
两个浮动的元素要在同一行，则这两个元素的宽度之和，必须小于外层的元素，否则就会因为外层元素宽度过小，把其中一个div挤到下一行去显示，居中的话，用margin:0px auto；就可以了。
====================
举个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta ; charset=utf-8" />
<title>；无标题文档</title>
<style type="text/css">
#warp{
width:800px;
zoom:1;
overflow:hidden;
}
#side{
width:300px;
height:200px;
float:left;
background:blue;
}
#main{
width:400px;
height:300px;
float:left;
background:red;
}
</style>
</head>
<body>
<div id="warp">
<div id="side"></div>
<div id="main"></div>
</div>
</body>
</html>
转载请注明出处育才学习网 » div另起一行怎么写
