內部div推外段div

Question

我有一個名爲insidenextcontent2的div。 這只是一個顏色部分的div。 在這個div中，我有另一個叫做bottle1的div，它是一個幾何形狀（應該是瓶子的頂部）。 另外，除了這個幾何形狀之外，我還有一個我想要定位的段落。但是，該段位於整個div（insidecontent）之下。

我該如何解決這個問題？除了內部div，我希望文本位於外部div內。

.insidenextcontent2 { 
 
    margin-top: 10%; 
 
    width: 100%; 
 
    height: 15%; 
 
    background: #EEFA0F; 
 
} 
 

 
.bottle1 { 
 
    margin-left: 30%; 
 
    border-top: 97px solid black; 
 
    border-left: 35px solid transparent; 
 
    border-right: 35px solid transparent; 
 
    height: 0; 
 
    width: 150px; 
 
} 
 

 
#webpara { 
 
    color: black; 
 
    margin-left: 50%; 
 
    font-family: 'Fjalla One', sans-serif; 
 
}

<div class="insidenextcontent2"> 
 
    <div class="bottle1"></div> 
 
    <p id="webpara">Web &amp app development</p> 
 
</div>

Answer 1

1. 地方你在一個div旁邊的一瓶DIV段落。
2. 將display: flex添加到您的包含div。

https://jsfiddle.net/m08paL1d/2/

<div class="insidenextcontent2"> 
    <div class="bottle1"> </div> 
    <div> 
     <p id="webpara">Web app development</p> 
    </div> 
</div> 

CSS：

.insidenextcontent2 { 
    margin-top: 10%; 
    width: 100%; 
    height: 15%; 
    background: #EEFA0F; 
    display: flex; 
} 

.bottle1 { 
    margin-left: 30%; 
    border-top: 97px solid black; 
    border-left: 35px solid transparent; 
    border-right: 35px solid transparent; 
    height: 0; 
    width: 150px; 
} 

#webpara { 

    color: black; 
    margin-left: 50%; 
    font-family: 'Fjalla One', sans-serif; 
}