Question

我想在已经有其他3个浮动容器的绝对容器之后添加一个容器。

我没有机会尝试clearfix和其他CSS黑客。

你可以看到我的绿色容器没有显示前6行。

请添加CSS解决方案，不使用JS或jQuery解决方案！

＆＃13;

#themaincontainer {
    position: absolute;
    width: 100%;
    border: 3 px solid #0A74B4;
    background-color: red;
    height: auto;
}
img.img1stdiv {
  max-width: 128px;
  max-height: 128px;
}
.my1floated {
    width: 15%;
    display: block;
    position: relative;
    float: left;  
    margin-right: 2%;
}
.my2floated {
    width: 56%;
    display: block;
    position: relative;
    float: left;
    margin-right: 2%;
}
.my3floated {
    position: relative;
    float: left;
    width: 25%;
    display: block;
    margin-right: 0;
}
#othercontainerafter {
  background-color: green;
  width: 100%;
  height: auto;
}

＆＃13;

<div id="themaincontainer">
<div class="my1floated">
<img class="img1stdiv" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
</div>
  <div class="my2floated">
    <h2>My title here</h2>
  </div>
  <div class="my3floated">
    <h3>Support info here</h3>
  </div>
</div>
<div id="othercontainerafter">
The content of this container should be after themaincontainer who have inside that 3 floated containers.
  Line1
  <br>
  Line2
  <br>
  Line3
  <br>
  Line4
  <br>
  Line5
  <br>
  Line6
  <br>
  Line7
  <br>
  Line8
  <br>
  Line9
  <br>
  Line10
  <br>
</div>

＆＃13;

Answer 1

Floated元素不遵循自然文档流程，因此可能会出现这样的布局问题。您可以通过更改CSS来解决此问题：

#themaincontainer {
  float: left; /* Use this instead of position: absolute */
  width: 100%;
  border: 3 px solid #0A74B4;
  background-color: red;
  height: auto;
}

#othercontainerafter {
  background-color: green;
  width: 100%;
  height: auto;
  float: left; /* Added */
  clear: both; /* To avoid elements will end up next to each other */
}

小提琴here

或者，使用flexbox而不是浮动。

#maincontainer {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

#container-1 {
  border: 3 px solid #0A74B4;
  background-color: red;
  display: flex;
  width: 100%;
}

img.img1stdiv {
  max-width: 128px;
  max-height: 128px;
}

.my1floated {
  width: 15%;
  margin-right: 2%;
}

.my2floated {
  width: 56%;
  margin-right: 2%;
}

.my3floated {
  width: 25%;
}

#container-2 {
  background-color: green;
  width: 100%;
}

<div id="maincontainer">
  <div id="container-1">
    <div class="my1floated">
      <img class="img1stdiv" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
    </div>
    <div class="my2floated">
      <h2>My title here</h2>
    </div>
    <div class="my3floated">
      <h3>Support info here</h3>
    </div>
  </div>
  <div id="container-2">
    The content of this container should be after themaincontainer who have inside that 3 floated containers. Line1
    <br> Line2
    <br> Line3
    <br> Line4
    <br> Line5
    <br> Line6
    <br> Line7
    <br> Line8
    <br> Line9
    <br> Line10
    <br>
  </div>
</div>

Answer 2

#themaincontainer {
    position: relative;
    width: 100%;
    border: 3 px solid #0A74B4;
    background-color: red;
    height: auto;
    display: inline-block;
}

将位置更改为相对位置，因为绝对会使div浮动。相对位置将强制#themainDiv先出现并在其后显示#otherDiv。

我已经编辑了上面#mainDiv的样式。只需复制粘贴即可。

Answer 3

你使用width:100%所以不需要position:absolute，当设置为绝对或固定时，元素将从文档的正常流程中完全删除。

更改#themaincontainer赞这样：

#themaincontainer {
    position: absolute; <-----------------Removed
    width: 100%;
    border: 3  px solid #0A74B4;<----------3  px is Wrong,3px is correct.
    background-color: red;
    height: auto;
    overflow: hidden;<-------------------Added
}

完整代码：

＆＃13;

#themaincontainer {
  width: 100%;
  border: 3px solid #0A74B4;
  background-color: red;
  height: auto;
  overflow: hidden;
}

img.img1stdiv {
  max-width: 128px;
  max-height: 128px;
}

.my1floated {
  width: 15%;
  display: block;
  position: relative;
  float: left;  
  margin-right: 2%;
}

.my2floated {
  width: 56%;
  display: block;
  position: relative;
  float: left;
  margin-right: 2%;
}

.my3floated {
  position: relative;
  float: left;
  width: 25%;
  display: block;
  margin-right: 0;
}

#othercontainerafter {
  background-color: green;
  width: 100%;
  height: auto;
}

＆＃13;

<div id="themaincontainer">
  <div class="my1floated">
     <img class="img1stdiv" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
  </div>
  <div class="my2floated">
     <h2>My title here</h2>
  </div>
  <div class="my3floated">
     <h3>Support info here</h3>
  </div>
</div>
<div id="othercontainerafter">
The content of this container should be after themaincontainer who have inside that 3 floated containers.
Line1<br>Line2<br>Line3<br>Line4<br>Line5<br>Line6<br>Line7<br>Line8<br>Line9<br>Line10<br>
</div>

＆＃13;

CSS在已经有其他3个浮动容器的绝对容器之后添加容器

3 个答案: