不能正確地浮動div

Question

我有一個列表，每個3塊，每個正常33％。當我調整窗口的大小時，我希望前兩個塊疊加在一起，佔50％的寬度，而第三個元素佔據另一個50％，但我只能夠跨越第一行的前兩個塊和第二行的第三個塊。

而且爲了進一步減少它，我希望所有這些都被疊加在一起。

我已經添加了佈局：

這裏是我的代碼：

li.listChild .time-home { 
 
    float: left; 
 
    height: auto; 
 
    width: 100%; 
 
    line-height: 21px; 
 
    font-size: 12px; 
 
    font-weight: 700; 
 
    text-align: right; 
 
} 
 
@media only screen and (min-width: 800px) and (max-width: 1023px) { 
 
    li.listChild .time-home { 
 
    width: 100%; } 
 
} 
 
li.listChild .time-home .listItem { 
 
    float: left; } 
 
li.listChild .time-home .listItem.datum-home { 
 
    width: 33%; 
 
    font-weight: 700; } 
 
@media only screen and (min-width: 1024px) and (max-width: 1443px) { 
 
    li.listChild .time-home .listItem.datum-home { 
 
    width: 50%; 
 
    border-bottom: 1px #e8e8e8 solid; } 
 
} 
 
@media only screen and (min-width: 800px) and (max-width: 1023px) { 
 
    li.listChild .time-home .listItem.datum-home { 
 
    width: 100%; 
 
    border-bottom: 1px #e8e8e8 solid; } 
 
} 
 
li.listChild .time-home .listItem.zeit-home { 
 
    font-weight: 400; 
 
    width: 33%; 
 
} 
 
@media only screen and (min-width: 1024px) and (max-width: 1443px) { 
 
    li.listChild .time-home .listItem.zeit-home { 
 
    width: 50%; 
 
    border-bottom: 1px #e8e8e8 solid; } 
 
} 
 
@media only screen and (min-width: 800px) and (max-width: 1023px) { 
 
    li.listChild .time-home .listItem.zeit-home { 
 
    width: 100%; 
 
    border-bottom: 1px #e8e8e8 solid; } 
 
} 
 
li.listChild .time-home .listItem.type-home { 
 
    width: 33%; 
 
    color: #0293ed; 
 
    border: none; 
 
    font-weight: 700; 
 
} 
 
@media only screen and (min-width: 1024px) and (max-width: 1443px) { 
 
    li.listChild .time-home .listItem.type-home { 
 
    width: 100%; 
 
    border-bottom: 1px #e8e8e8 solid; 
 
    border-right: 1px #e8e8e8 solid; } 
 
} 
 
@media only screen and (min-width: 800px) and (max-width: 1023px) { 
 
    li.listChild .time-home .listItem.type-home { 
 
    width: 100%; 
 
    border-bottom: 1px #e8e8e8 solid; 
 
    border-right: 1px #e8e8e8 solid; } 
 
}

<li class="listChild"> 
 
    <div class="time"> 
 
     <div class="listItem datum"> 
 
      3.6.93 
 
     </div> 
 
     <div class="listItem zeit"> 
 
      4.6.93 
 
     </div> 
 
     <div class="listItem type"> 
 
     Thomas 
 
    </div> 
 
    </div> 
 
    
 
</li>

Answer 1

你不一定需要向使用Flexbox的，你可以使用絕對定位。

例子：https://jsfiddle.net/yyuwmv1r/

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    height: 300px; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.one, 
 
.two, 
 
.three { 
 
    border: 2px solid black; 
 
    height: 33.33%; 
 
    width: 100%; 
 
    float: left; 
 
    background: red; 
 
} 
 
.two { 
 
    background: blue; 
 
} 
 
.three { 
 
    background: green; 
 
} 
 

 
@media only screen and (min-width: 800px) and (max-width: 1200px) { 
 
    .one, 
 
    .two, 
 
    .three { 
 
    position: absolute; 
 
    } 
 
    .one { 
 
    top: 0; 
 
    left: 0; 
 
    height: 50%; 
 
    width: 50%; 
 
    } 
 
    .two { 
 
    top: 50%; 
 
    left: 0; 
 
    height: 50%; 
 
    width: 50%; 
 
    } 
 
    .three { 
 
    top: 0; 
 
    left: 50%; 
 
    height: 100%; 
 
    width: 50%; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1200px) { 
 
    .one, 
 
    .two, 
 
    .three { 
 
    border: 2px solid black; 
 
    height: 100%; 
 
    width: 33.33%; 
 
    float: left; 
 
    background: red; 
 
    } 
 
    .two { 
 
    background: blue; 
 
    } 
 
    .three { 
 
    background: green; 
 
    } 
 
}

<div class="container"> 
 
    <div class="one"> 
 
    One 
 
    </div> 
 
    <div class="two"> 
 
    Two 
 
    </div> 
 
    <div class="three"> 
 
    Three 
 
    </div> 
 
</div>

Answer 2

您可以Flexbox的和媒體爲此詢問

DEMO

.div-1, .div-2, .div-3 { 
    border: 1px solid black; 
} 

.content { 
    display: flex; 
    flex-direction: row; 
    min-height: 100vh; 
} 

.group { 
    flex: 2; 
    display: flex; 
} 

.div-3, .div-1, .div-2 { 
    flex: 1; 
} 

@media(max-width: 992px) { 
    .group { 
    flex-direction: column; 
    } 
} 

@media(max-width: 480px) { 
    .content { 
    flex-direction: column; 
    } 
} 

<div class="content"> 
    <div class="group"> 
    <div class="div-1">Div 1</div> 
    <div class="div-2">Div 2</div> 
    </div> 

    <div class="div-3">Div 3</div> 
</div> 

Answer 3

向左拖動輸出，右模擬媒體查詢。請記住，我沒有遵守你的媒體查詢，只是用我自己來模擬這個例子。

Fiddle here

<li class="listChild"> 
    <div class="time"> 
    <div class="some-container"> 
     <div class="listItem datum"> 
     list one 
     </div> 
     <div class="listItem zeit"> 
     list two 
     </div> 
    </div> 
    <div class="listItem type"> 
     list three 
    </div> 
    </div> 
</li> 

* { 
    box-sizing: border-box; 
} 

.listItem { 
    border: 1px solid #000; 
    padding: 10px; 
    float: left; 
    width: 250px; 
    height: 30px; 
} 

.some-container { 
    float: left; 
} 

.some-container + .listItem { 
    float: left; 
} 

@media (max-width: 800px) and (min-width: 300px) { 
    .some-container .listItem { 
    height: 30px; 
    float: none; 
    } 
    .some-container + .listItem { 
    height: 60px; 
    } 
} 

@media (max-width: 299px) { 
    .listItem { 
    float: none; 
    width: 100%; 
    } 
}