1

これは初心者の質問であることは知っていますが、これを理解することはできません! イントラネット用のページをレイアウトしていますが、必要なことは、いくつかの 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 が必要になります。

<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 に答える