Question

我正在尝试制作一个包含两个元素的简单包装器。所以我创建了一个包含两个孩子的包装类。 div的孩子们正在以相反的顺序出现。

任何想法我应该怎么做？

这是我的html结构：

<div class="wrapper">
 <div class="intro">
 <div class="iPhone">
</div>

这是我的css：

.wrapper {
 position: absolute;
 float: right;
}

.intro {
 float:left;
 background-size:cover;
}

.iPhone {
 float:left;
}

Answer 1

您忘记了容器内的最终标签。如果您需要使用某个.clearfix类到父容器，并且它们正确显示，则使用float。将其添加到包装器中：

.clearfix:after {
display: table;
content: "";
clear: both;
}

Answer 2

只是一些事情..

使用绝对定位时，属性float将被忽略。如果要定位包装器，请使用左，右，顶部和底部属性
不要忘记关闭你的div，可能是某些浏览器会因为你没有添加</div>标签而弄乱你的代码

我已经测试了你的代码，它似乎正常，左边是介绍，右边是iPhone。在浏览器中查看一下（我已经添加了一些颜色，宽度和高度来演示它）

<html>
    <head>
    <style type="text/css">

        .wrapper {
            position: absolute;
            float: right;
            background-color: red;

            width: 300px;
            height: 300px;
        }

        .intro {
             float:left;
             background-size:cover;

             background-color: blue;
             width: 50%;
             height: 100%;
        }

        .iPhone {
             float:left;

             background-color: green;
             width: 50%;
             height: 100%;

        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="intro"></div>
        <div class="iPhone"/></div>
    </div>
</body>
</html>

Divs以相反的顺序出现

2 个答案: