位置元素背後：絕對大小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

回答

相關問題