關於css和html的問題

用DIV創建頁面的最佳方式是什麼？這裏是一個例子： Page with DIVs having different positions. 關於css和html的問題

來源

2011-05-30 Neir0

你爲什麼要做這個熱狗？ – 2011-05-30 15:57:34

@ Coding-Freak這是網站設計的一部分 – Neir0 2011-05-30 16:03:20

哦。你一定已經說過了，否則任何人都會認爲它只是爲了好玩...... – 2011-05-30 16:05:27

看起來你需要使用絕對定位，每個元素的固定寬度和高度。

來源

2011-05-30 15:57:36

使用CSS絕對定位。你可以找到一個解釋here
基本上，它會看起來像

#div1 { 
    position:absolute; 
    left:100px; 
    top:150px; 
    width:80px; 
    height:30px; 
} 

#div2 { 
    position:absolute; 
    left:120px; 
    top:200px; 
    width:100px; 
    height:30px; 
}

等等

來源

2011-05-30 15:58:14

創建absolute定位的DIV並設置top和left CSS參數爲他們每個人。

您可以用relative定位div來包裝它們。

來源

2011-05-30 15:58:23 aorcsik

參見：http://jsfiddle.net/Yz9e4/

這是如何工作的？ 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>

來源

2011-05-30 16:08:03 thirtydot

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。

來源

2011-05-30 16:09:37 melhosseiny

<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 16:15:24

關於css和html的問題

回答

相關問題