1. 首頁 > 生活百科 > >

div另起一行怎么寫

生活百科Div

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；這樣就可以在一行排列順次排列 。
【div另起一行怎么寫】也可以對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>