Question

我知道这是一个菜鸟问题，但我无法弄清楚这一点！我正在为我们的内部网布置一个页面，我需要做的就是将一些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>

basic layout

Answer 1

不要绝对放置容器。

.container { 宽度：400px; 身高：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;
}

添加display：inline-block; 并删除位置：绝对。

将每个容器的宽度设置为包装器的大约30％将确保三个容器在进入新行之前排成一行。

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

e.g。

.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 个答案: