如何確定沒有內容的相對div？

我有一個HTML標記，其中的印刷內容是<p> -tags。在這些標籤之間，我想放置一些圖像。這些圖像的大小始終相同：100％寬，50％高。
爲了避免一些扭曲，我設置了一個<div> -tag這個大小，並將圖像設置爲封面大小的背景圖像。如何確定沒有內容的相對div？

此<div>不包含任何內容，但背景圖像除外。所以我的尺碼無法使用，因爲我無法將其設置爲position: absolute/fixed;，因此它不適合<p>標籤。

那麼我怎麼能夠在不損失合適的情況下確定空的 div？

的HTML標記：

<div class="container"> 
    <section class="about"> 
    <div class="content"> 
     <p>Lorem ipsum dolor</p> 

     <div class="img"></div> 

     <p>Lorem ipsum dolor</p> 
    </div> 
    </section> 
</div>

而CSS樣式

.container, 
.container > section{ 
    position: fixed; 
    height: 100%; 
    width: 100%; 
} 
.container > section{ 
    overflow:auto; 
} 
.container > section > .content > p{ 
    padding: 5% 15% 5% 15%; 
    font-family: Arial, sans-serif; 
    font-size: 1.8em; 
    line-height: 1.5; 
} 
.container > section > .content > .img{ 
    width:100%; 
    height:50%; 
    background: url(http://www.hdcarwallpapers.com/walls/widescreen_lamborghini_lp710-wide.jpg) no-repeat center center; 
    background-size:cover; 
}

而一個CODEPEN DEMO

來源

2014-03-03 Michael Schmidt

嗯...... IMO這不起作用，因爲.img的高度是一個百分比。所有父標籤必須具有百分比的高度。 – 2014-03-03 15:54:12

似乎您正在尋找一個響應式容器，以根據* width *設置* height *。如果是這樣，你可以參考[我的答案]（http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474）。看看第二部分：* Responsive Container * –

我認爲這個問題是height。嘗試刪除50％的高度，而是增加padding的50％

.container > section > .content > .img{ 
    display: block; 
    width:100%; 
    padding: 0 0 50% 0; 
    background: url(http://www.hdcarwallpapers.com/walls/widescreen_lamborghini_lp710-wide.jpg) no-repeat center center; 
    background-size:cover; 
}

這裏有一個demo。

來源

2014-03-03 15:55:59 Pattle

@dTDesign沒問題。很高興我能幫上忙：） – Pattle

我不知道你指當你說你想避免「扭曲」到什麼問題，因爲目前這裏最簡單的辦法就是真正包括圖像（S）自己在標記，然後添加一些樣式，使他們敏感。

然而，你可以用你的方法實現你想要的（只有瀏覽器支持受損）。你知道你希望圖像顯示的比率。首先，從.img div中刪除width: 100%（這是一個div，它將填充橫向空間）。然後，添加你的50％作爲填充：

.img { 
    padding-bottom: 50%; 
}

當您設置的高度（或垂直這裏填充）的百分比，實際上是將其設置爲父的寬度的百分比。這意味着你的.img div總是會有padding等於.content div的一半，這就是你所追求的。

這與獲取流體視頻和內聯框架工作所需的方法相同。查看this CSS Tricks article以瞭解正在發生的事情。

來源

2014-03-03 16:00:01 CherryFlavourPez

如何確定沒有內容的相對div？

回答

相關問題