1

我知道这是一个菜鸟问题，但我就是想不通！我正在为我们的 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>

基本布局

4

3 回答 3

3

不要绝对定位你的容器。

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

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

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

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

于 2013-08-09T19:46:47.580 回答
2

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

尝试这个：

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

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

这应该工作

于 2013-08-09T19:49:20.040 回答
1

我不知道我是否完全理解

但是让容器对齐的一种方法是将 .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;
}
于 2013-08-09T19:51:51.197 回答