内部div将段落推到外部div之外

Question

我有一个名为insidenextcontent2的div。 这只是一个为一个部分着色的div。 在这个div我有另一个叫做bottle1的div，它是一个几何形状（应该是瓶子的顶部）。 另外，我有一个段落，除了这个几何形状我想要定位。但是，该段落在整个div（insidecontent）之下。

我该如何解决这个问题？我希望文本在外部div中，除了内部div。

Tue Oct 31 2017

.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;
}

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;
}