Css div按相反的顺序出现_Css_Html

Css div按相反的顺序出现

css html

Css div按相反的顺序出现,css,html,Css,Html,我试图制作一个简单的包装器，它包含两个元素。所以我创建了一个包装器类，它有两个孩子。该部门的孩子们以相反的顺序出现你知道我该怎么做吗以下是我的html结构： <div class="wrapper"> <div class="intro"> <div class="iPhone"> </div> 您忘记了容器中的最终标签。如果您在需要使用某些.clearfix类来创建父容器时使用float，那么它们将正确显示。将此添加到包装器： .c

我试图制作一个简单的包装器，它包含两个元素。所以我创建了一个包装器类，它有两个孩子。该部门的孩子们以相反的顺序出现

你知道我该怎么做吗

以下是我的html结构：

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

您忘记了容器中的最终标签。如果您在需要使用某些.clearfix类来创建父容器时使用float，那么它们将正确显示。将此添加到包装器：

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

您忘记了容器中的最终标签。如果您在需要使用某些.clearfix类来创建父容器时使用float，那么它们将正确显示。将此添加到包装器：

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

就几件事

使用绝对定位时，将忽略特性浮动。如果要定位包装器，请使用left、right、top和bottom属性

别忘了关闭div，可能是因为您没有添加

标记，某些浏览器会弄乱您的代码

我已经测试了你的代码，看起来效果不错，左边是简介，右边是iPhone。在你的浏览器中看一看（我添加了一些颜色、宽度和高度来演示）


.包装纸{
位置：绝对位置；
浮动：对；
背景色：红色；
宽度：300px；
高度：300px；
}
.介绍{
浮动：左；
背景尺寸：封面；
背景颜色：蓝色；
宽度：50%；
身高：100%；
}
.iPhone{
浮动：左；
背景颜色：绿色；
宽度：50%；
身高：100%；
}

只有几件事

使用绝对定位时，将忽略特性浮动。如果要定位包装器，请使用left、right、top和bottom属性

别忘了关闭div，可能是因为您没有添加

标记，某些浏览器会弄乱您的代码

我已经测试了你的代码，看起来效果不错，左边是简介，右边是iPhone。在你的浏览器中看一看（我添加了一些颜色、宽度和高度来演示）


.包装纸{
位置：绝对位置；
浮动：对；
背景色：红色；
宽度：300px；
高度：300px；
}
.介绍{
浮动：左；
背景尺寸：封面；
背景颜色：蓝色；
宽度：50%；
身高：100%；
}
.iPhone{
浮动：左；
背景颜色：绿色；
宽度：50%；
身高：100%；
}

我删除了浮动样式，但它仍然是一样的。它们的顺序不是相反的（我只是尝试了你的代码，效果很好）。你的HTML看起来很奇怪……你没有关闭包装中的div。另外，position absolute与float不一致…选择一个或另一个…不是两个-我删除了浮动样式，但它仍然是一样的。它们的顺序不是相反的（我只是尝试了你的代码，它工作了）。你的HTML看起来很奇怪…你没有关闭包装器中的div。而且，绝对位置与浮动不一致…选择一个或另一个…而不是两个-

<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>