即使有常规的＆＃39;在他们之间划分

Question

我有以下代码：

<div class="container">
    <div class="item">1</div>
    <div class="item can_disappear">2</div>
    <div class="wide"></div>
    <div class="item need_to_be_up">3</div>
    <div class="item">4</div>
</div>

css：

.item { 
    width :49%;
    height : 100px;
    float : left;
    background-color:yellow;
    border:1px solid black;
}

.container {
    width :200px;
    position : relative
}

.wide {
    width :100%;
    height : 100px;
    background-color:red;
    float:left;
}

项目＃2可以得到＆＃34;显示：无＆＃34;。 是否有任何方式，项目＃3将上升（将在广泛的div之前，与第一项目并排）？

＆＃34;广泛＆＃34;不是必须的。 div浮动......

这里是jsfiddel：https://jsfiddle.net/edanuf7t/4/ 感谢

Answer 1

也许这不是最佳解决方案，但您可以通过:nth-child(even)和<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> 选择器解决此问题。

HTML：

.item { 
 width :49%;
    height : 100px;
    float : left;
    background-color:yellow;
    border:1px solid black;
}

.item:nth-child(even){margin-bottom:100px;position:relative}
.item:nth-child(even):after {display:block;content:" ";height:100%;background:red;width:201px;position:absolute;right:-1px;bottom:-100px}
.item:last-of-type:after {display:none}

.container {
     width :200px;
    position : relative
}

CSS：

User.IsInRole()

和JSFiddle link

Answer 2

有三步解决方案：

1. 重新排序元素，以便.wide位于.item之后。
2. 将margin-bottom: 100px;添加到.item s。
3. 给.wide margin-top: -302px;

302px而不是300px，以考虑第二行项目的顶部和底部1px边框。

现在，当您将display: none;应用于任何浮动的.item时，以下.item只会向左浮动到新创建的空间中。

.item { 
    width :49%;
    height : 100px;
    float : left;
    background-color:yellow;
    margin-bottom: 100px;
    border:1px solid black;
}

.container {
    width :200px;
    position : relative
}

.wide {
    float:left;
	margin-top: -302px;
    width :100%;
    height : 100px;
    background-color:red;
}

<div class="container">
    <div class="item">1</div>
    <div class="item can_disappear">2</div>
    <div class="item need_to_be_up">3</div>
    <div class="item">4</div>
    <div class="wide"></div>
</div>

<div class="container">
    <div class="item">1</div>
    <div class="item can_disappear" style="display: none;">2</div>
    <div class="item need_to_be_up">3</div>
    <div class="item">4</div>
    <div class="wide"></div>
</div>

Answer 3

.item:nth-child(2) {
    display: none;
}

.item:nth-child(4) {
    float: right;
    margin-top: -202px;
}


-------- (or) -------------


.item:nth-child(2) {
    display: none;
}


.item:nth-child(4) {
    float: none;
    position: absolute;
    top: 0;
    right: 0;
}