位置元素背后：绝对大小HTML CSS

我有两个箱子，我用。我需要做的是接下来的两个盒子不能下，但在移动视图之后。位置元素背后：绝对大小HTML CSS

.bg_info_profile { 
 
    padding-bottom: 20%; 
 
} 
 

 
.bg_info_profile .bg_profile_red_left { 
 
    background: green; 
 
    padding-bottom: 110px; 
 
    width: 50%; 
 
    position: absolute; 
 
} 
 

 
.bg_info_profile .bg_profile_red_right { 
 
    background: yellow; 
 
    padding-bottom: 110px; 
 
    width: 50%; 
 
    float: right; 
 
    position: relative; 
 
}

<div class="bg_info_profile"> 
 
    <div class="bg_profile_red_left"> 
 
    asdf 
 
    </div> 
 
    <div class="bg_profile_red_right"> 
 
    asdf 
 
    </div> 
 
</div>

IMAGE：

来源

2017-03-15 Philip

因此，您添加了很好的演示，但决定不添加文本？证明问题。 – dfsq

当我尝试这样做时，它只能通过框 – Philip

绝对定位的元素取 “出来的流的”，这意味着它们提供基本上没有高度给父母，也没有其身高和体位影响兄弟姐妹。

如果您希望这些元素以您期望的方式改为影响页面，除非您想指定容器的高度，否则它们不能为position: absolute;。

你可以做的只不过是float他们左右，根本不使用position: absolute;。需要注意的是，float与position: absolute;非常相似，因为之后的元素将忽略浮动元素的高度。

因此，浮动元素后需要clear: both;，这基本上告诉其余元素“考虑浮动元素的高度”。我已将此clear: both;应用于容器上的伪元素，使用::after。

.bg_info_profile { 
 
    padding-bottom: 20%; 
 
} 
 

 
.bg_info_profile::after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.bg_info_profile .bg_profile_red_left { 
 
    background: green; 
 
    padding-bottom: 110px; 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.bg_info_profile .bg_profile_red_right { 
 
    background: yellow; 
 
    padding-bottom: 110px; 
 
    width: 50%; 
 
    float: right; 
 
}

<div class="bg_info_profile"> 
 
    <div class="bg_profile_red_left"> 
 
    asdf 
 
    </div> 
 
    <div class="bg_profile_red_right"> 
 
    asdf 
 
    </div> 
 
</div> 
 

 
THIS IS SOME TEXT AFTER

来源

2017-03-15 15:52:36 Santi

感谢它的工作@Santi – Philip

@Philip给我一秒来解决这个问题。这只*看起来像它的工作，但承认它不。我被欺骗了，因为你的容器上的填充文本使文本完美定位。 – Santi

哦，我看到了，我只是检查了一些文本框下。谢谢你的方式 – Philip

的HTML是

<div class="bg_info_profile"> 
     <div class="bg_profile_red_left"> 
     asdf 
     </div> 
     <div class="bg_profile_red_right"> 
     asdf 
     </div> 

    </div> 
    <div class="clr"></div> 
     <p> 
     weewewewe 
     </p>

而CSS是

.bg_info_profile { 
    padding-bottom: 20%; 
    position:relative; 
} 

.bg_info_profile .bg_profile_red_left { 
    background: green; 
    padding-bottom: 110px; 
    width: 50%; 
float: left; 

} 

.bg_info_profile .bg_profile_red_right { 
    background: yellow; 
padding-bottom: 110px; 
    width: 50%; 
float: left; 

} 
.clr{ 
    clear:both; 

}

而且提琴手链接https://jsfiddle.net/oys5v9uf/

来源

2017-03-15 16:07:32

位置元素背后：绝对大小HTML CSS

回答

相关问题