浮动单独的容器中/右彼此

问题描述：

<div class="wrapper"> 
<div id="container-1"></div> 
<div id="container-2"></div> 
<div id="container-3"></div> 
<div id="container-4"></div> 
<div id="container-5"></div> 
</div>

我试图到第一容器3浮到左侧，最后2向右（下一个开始到第一个漂浮在左边，顶部）

目前我只实现了浮动的前3个左边，最后2个右边，但从最后一个浮动左容器开始，而不是顶部。

小提琴：

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.left, 
 
.right { 
 
    width: 40%; 
 
    height: 100px; 
 
    float: left; 
 
    clear: left; 
 
    background: red; 
 
    margin: 5px; 
 
} 
 

 
.right { 
 
    float: right; 
 
    clear: right; 
 
    background: green; 
 
    text-align: right; 
 
}

<ul> 
 
    <li>div's are dynamic so left/right divs will be added, so unable to fixed position them in html</li> 
 
</ul> 
 
<div class="left"></div> 
 
<div class="left"></div> 
 
<div class="right"></div> 
 
<div class="left"></div> 
 
<div class="right"></div> 
 
<div class="left"></div>

预期结果应该是例如

在HTML你使用ID选择器和在CSS你写类选择器..它是如何工作的？ –

编辑它，错误在这里，因为我只是重新键入它:)但选择器都可以 – Kemagezien

它只有5个容器或更多？ –

答

EDIT

html, 
body { 
    margin: 0; 
    padding: 0; 
    position:relative; 
} 

.left, 
.right { 
    width: 40%; 
    height: 100px; 
    margin: 5px; 

} 

.left{ 
    float: left; 
    clear: left; 
    background: red; 
} 

.right ~ .right{ 
    position:absolute; 
    top:0; 
    right:0; 
} 
.right { 
    background: green; 
    text-align: right; 
    float:right; 
}

<div class="left"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div>

编辑2

 html, 
body { 
    margin: 0; 
    padding: 0; 
} 

.left, 
.right { 
    width: 40%; 
    height: 100px; 
    margin: 5px; 

} 

.left{ 
    float: left; 
    clear: left; 
    background: red; 
} 

.right { 
    background: green; 
    text-align: right; 
    float:right; 
}

<div class="left"></div> 
<div class="right"></div> 
<div class="right"></div> 
<div class="left"></div> 
<div class="left"></div> 
<div class="left"></div>

嗨，您在它周围添加了一个容器div （左右课）。我不能改变/添加/删除代码，我有:) – Kemagezien

嗯okey，那么你必须强迫它在那里我猜，但它不会很漂亮，像位置：相对;底部:(一些像素）。你为什么不能改变它？ –

他们决定与其他开发人员合作。我试图用flexbox实现它，但似乎是同样的问题。 https：//开头的jsfiddle。net/Kemagezien/zem6js03/1/ – Kemagezien

答

您可以使用Flexbox订货元素

.wrapper { 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
} 
 
#container-1, #container-2, #container-3, #container-4, #container-5{ 
 
float:left; 
 
width: 50%; 
 
} 
 
#container-1 { 
 
    order:1; 
 
} 
 
#container-4 { 
 
    order:2; 
 
} 
 
#container-2 { 
 
    order:3; 
 
} 
 
#container-3 { 
 
    order:5; 
 
} 
 
#container-5 { 
 
    order:4; 
 
}

<div class="wrapper"> 
 
    <div id="container-1">container 1</div> 
 
    <div id="container-2">container 2</div> 
 
    <div id="container-3">container 3</div> 
 
    <div id="container-4">container 4</div> 
 
    <div id="container-5">container 5</div> 
 
</div>

嘿，伟大的开始，但因为我的div将会动态使用订单不会是最好的解决方案。 => https://jsfiddle.net/Kemagezien/p89xfrm3/ – Kemagezien

答

我认为，我可能已经找到了解决这一问题。希望我不太晚。

这里的新代码：

HTML（增加了一些元素来测试它）

<ul> 
    <li>div's are dynamic so left/right divs will be added, so unable to fixed position them in html</li> 
</ul> 
<div class="left"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div>

CSS：

html, 
body { 
    margin: 0; 
    padding: 0; 
} 

.left, 
.right { 
    width: 40%; 
    height: 100px; 
    float: left; 
    clear: left; 
    background: red; 
    margin: 5px; 
} 

.right { 
    float: right; 
    clear: right; 
    background: green; 
    text-align: right; 
    position: relative; 
    top: -110px; 
}

这里有一个小提琴：https://jsfiddle.net/xw456o6c/1/

浮动单独的容器中/右彼此

相关推荐