用DIV
創建頁面的最佳方式是什麼?這裏是一個例子: 關於css和html的問題
0
A
回答
1
看起來你需要使用絕對定位,每個元素的固定寬度和高度。
1
使用CSS絕對定位。你可以找到一個解釋here
基本上,它會看起來像
#div1 {
position:absolute;
left:100px;
top:150px;
width:80px;
height:30px;
}
#div2 {
position:absolute;
left:120px;
top:200px;
width:100px;
height:30px;
}
等等
1
創建absolute
定位的DIV並設置top
和left
CSS參數爲他們每個人。
您可以用relative
定位div來包裝它們。
0
這是如何工作的? http://css-tricks.com/absolute-positioning-inside-relative-positioning/
我的回答中的美是#boxContainer > div
,這意味着你可以避免爲每一個盒子指定position: absolute
。
CSS:
#boxContainer {
width: 500px;
height: 500px;
background: #ccc;
border: 1px dashed #444;
position: relative
}
#boxContainer > div {
/* put properties common to all positioned divs here */
position: absolute;
background: #999;
border: 2px dotted #444
}
#box1 {
top: 50px;
left: 50px;
width: 100px;
height: 75px
}
#box2 {
top: 200px;
left: 300px;
width: 180px;
height: 125px
}
HTML:
<div id="boxContainer">
<div id="box1"></div>
<div id="box2"></div>
</div>
0
HTML
<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div id="D"></div>
CSS
#A, #B, #C, #D {
position: absolute;
width: 50px;
height: 50px;
}
#A {
top: 20px;
left: 45px;
background-color: aqua;
}
#B {
top: 50px;
left: 100px;
background-color: blue;
}
#C {
top: 50px;
left: 200px;
background-color: red;
}
#D {
top: 200px;
left: 100px;
background-color: green;
}
請參閱fiddle。
0
<style>
#cont{
background:#ff0000;
postition:relative;
width:800px;
height:800px;
}
#inn{
background:#00ff00;
position:relative;
height:100px;
width:100px;
}
</style>
<body>
<div id="cont">
<div id="inn" style="top:100px;left:100px;"></div>
<div id="inn" style="top:300px;left:100px;"></div>
<div id="inn" style="top:420px;left:170px;"></div>
<div id="inn" style="top:200px;left:400px;"></div>
</div>
</body>
你爲什麼要做這個熱狗? – 2011-05-30 15:57:34
@ Coding-Freak這是網站設計的一部分 – Neir0 2011-05-30 16:03:20
哦。你一定已經說過了,否則任何人都會認爲它只是爲了好玩...... – 2011-05-30 16:05:27