在其兄弟之下移動內聯塊div

Question

如果不使用CSS更改HTML佈局，如何更改div02的位置以使其位於所有其他div之下？它們都是內嵌塊元素。我寧願不使用花車。另一方面，定位div相對/絕對不會推動該段落。有沒有其他的解決方案，以相對乾淨的方式做到這一點？不幸的是，我無法觸摸HTML。

HTML

<div class="wrap"> 
    <div class="div01">1</div> 
    <div class="div02">2</div> 
    <div class="div03">3</div> 
    <div class="div04">4</div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> 

CSS

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 

.wrap { 
    margin: 30px 0 0 30px; 
    width: 400px; 
    height: 200px; 
    border: 1px solid red; 
    font-size: 0; 
    overflow: auto; 
} 

p { 
    font-size: 11px; 
} 

.div01, .div02, .div03, .div04, .div05 { 
    font-size: 14px; 
    height: 50px; 
    width: 50px; 
    margin: 0; 
    padding: 0; 
    border: 1px solid blue; 
    display: inline-block;  
} 

.div02 { 
    width: 150px; 
} 

Answer 1

一種方法是你可以設置positon:relative於母公司並設置position:absolute到要移動，並相應設置位置

html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
.wrap { 
 
    margin: 30px 0 0 30px; 
 
    width: 400px; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
    font-size: 0; 
 
    overflow: auto; 
 
    position:relative; 
 
} 
 
p { 
 
    font-size: 11px; 
 
} 
 
.div01, 
 
.div02, 
 
.div03, 
 
.div04, 
 
.div05 { 
 
    font-size: 14px; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 1px solid blue; 
 
    display: inline-block; 
 
} 
 
.div02 { 
 
    width: 150px; 
 
} 
 
.div02 { 
 
    position: absolute; 
 
    bottom:0px; 
 
    left:0px; 
 
}

<div class="wrap"> 
 
    <div class="div01">1</div> 
 
    <div class="div02">2</div> 
 
    <div class="div03">3</div> 
 
    <div class="div04">4</div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</div>

的 div