Question

制作包含DIV个不同位置的网页的最佳方法是什么？这是一个例子： Page with DIVs having different positions.

Answer 1

看起来你需要使用绝对定位，每个元素都有固定的宽度和高度。

Answer 2

使用CSS绝对定位。你可以找到解释here
基本上它看起来像

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

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

等...

Answer 3

创建absolute个DIV，并为每个DIV设置top和left个CSS参数。

您可以使用relative定位div来包装它们。

Answer 4

请参阅： 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>

Answer 5

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。

Answer 6

<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>

关于css和html的问题

6 个答案: