使用绝对定位使用CSS定位div

Question

我知道这是一个菜鸟问题，但我只是想不通！ 我正在为我们的Intranet布置一个页面，我要做的就是并排放置一些div。 每个容器是一个不同的项目，但是所有容器都具有相同的结构，标题，一些描述性文本和图像。 我将添加提供给我的项目。 基本上，这只是我正在创建的供员工出售物品的页面。 这是我的CSS以及我要实现的目标的图像。 请让我知道这是否没有道理，但是就像你们已经证明的过去一样聪明，我敢肯定您的想法。

.wrapper {
    width: 1260px;
    height: 900px;
    margin: 0px auto;
    position: relative;
}
.container {
    width: 400px;
    height: 400px;
    margin: 10px;
    position: absolute;
}
.itemText {
    width: 350px;
    height: 190px;
    padding: 0px;
    position: absolute;
    top: 25px;
    left: 25px;
}
.itemHead {
    padding: 0px;
    margin: 0px;
}
.itemDesc {
    padding: 10px;
    margin: 0px;
}
.itemThumb {
    width: 350px;
    height: 150px;
    position: absolute;
    bottom: 25px;
    left: 25px;
}

我的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/text.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div class="itemText">
                <div class="itemHead">
                    <p>Lorem ipsum.</p>
                </div>
                <div class="itemDesc">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
                </div>
            </div>
            <div class="itemThumb"></div>
        </div>
        <div class="container">
            <div class="itemText">
                <div class="itemHead">
                    <p>Lorem ipsum.</p>
                </div>
                <div class="itemDesc">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
                </div>
            </div>
            <div class="itemThumb"></div>
        </div>
        <div class="container">
            <div class="itemText">
                <div class="itemHead">
                    <p>Lorem ipsum.</p>
                </div>
                <div class="itemDesc">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, placeat, aliquid tempore harum similique quo deleniti velit eum labore est?</p>
                </div>
            </div>
            <div class="itemThumb"></div>
        </div>
    </div>
</body>
</html>

基本布局

Answer 1

不要绝对放置容器。

.container {宽度：400像素； 高度：400px； 边距：10px; 职位：相对 向左飘浮; }

在最后一个容器div的末尾，您需要一个div来清除：left;

<div style="clear:left;"></div>

现在，当您添加更多div时，它们将自动浮动，并且容器将被清除。

Answer 2

在这种情况下，绝对定位真的没有用。

尝试这个：

.container {
    position: relative;
    float: left;
    width: 400px;
    height: 400px;
    margin: 10px;
}

您的div具有相同的高度，因此使用float非常方便。 通过为.container指定属性position: relative .itemThumb的位置正确。

这应该工作

Answer 3

我不知道我是否完全了解

但是让容器对齐的一种方法是将.container类设置为

.container {
width: 30%;
height: 400px;
margin: 10px;
display: inline-block;
}

添加显示内容：inline-block; 并删除位置：绝对。

将每个容器的宽度设置为包装纸的30％左右，可确保三个容器在换行之前对齐。

您将需要清除所有位置：css文件中的设置，以便所有信息都包含在div中。

例如

.wrapper {
    width: 1260px;
    height: 900px;
    margin: 0px auto;
    position: relative;
}
.container {
    width: 30%;
    height: 400px;
    margin: 10px;
    display: inline-block;
    border: 1px solid black;
}
.itemText {
    width: 350px;
    height: 190px;
    padding: 0px;
    top: 25px;
    left: 25px;
}
.itemHead {
    padding: 0px;
    margin: 0px;
}
.itemDesc {
    padding: 10px;
    margin: 0px;
}
.itemThumb {
    width: 350px;
    height: 150px;
    bottom: 25px;
    left: 25px;
}

使用绝对定位使用CSS定位div

问题描述

3 个解决方案

解决方案1
3 已采纳 2013-08-09 19:46:47

解决方案2
2 2013-08-09 19:49:20

解决方案3
1 2013-08-09 19:51:51

使用绝对定位使用CSS定位div

问题描述

3 个解决方案

解决方案1 3 已采纳 2013-08-09 19:46:47

解决方案2 2 2013-08-09 19:49:20

解决方案3 1 2013-08-09 19:51:51

解决方案1
3 已采纳 2013-08-09 19:46:47

解决方案2
2 2013-08-09 19:49:20

解决方案3
1 2013-08-09 19:51:51