用於響應屏幕尺寸的CSS div

我將徽標和徽標名稱顯示爲文本。請參閱下面的圖片以清楚地瞭解我的問題。找到的絕大部分技巧和答案都是使用絕對定位，但這並不符合我的要求。 enter image description here 用於響應屏幕尺寸的CSS div

DIV類框： 黃色：集裝箱，綠色：爲標誌，藍色：標識的文字或圖案的名稱作爲文本

所有正確的顯示來實現的樣品的右邊出現上面的div佈局圖像。

問題摘要：如果兩個DIV（徽標和標誌文本）的左浮動但唯一的問題是它浮在上面

一切都將是工作的罰款。我將如何在「容器」底部顯示「徽標文本」？
這可能沒有將「標識文本」置於絕對位置？

現在，div容器，徽標和徽標文本類會左移。

來源

2012-12-15 Raf

不錯繪製它顯示了它相當不錯，如果你要添加的jsfiddle或一些代碼，會幫助更多的可能性 – daniel

@丹尼爾..現在每個div都是左浮動的（就像當前的第一個顯示器一樣）。我認爲不需要添加代碼，因爲我已經說過了。 – Raf

我認爲display: inline-block與vertical-align: bottom;讓你到你想要的地方;

<div class=logo>logo</div> 
<div class=name>name</div> 

.logo { 
    display: inline-block; 
    vertical-align: bottom; 
    width: 200px; 
    height: 200px; 
    background-color: red; 
} 
.name { 
    display: inline-block; 
    vertical-align: bttom; 
    width: 300px; 
    height: 50px; 
    background-color: blue; 
}

這是在行動：http://jsfiddle.net/hajpoj/CDBHT/

來源

2012-12-15 05:52:08 hajpoj

調整結果窗口中看到的效果。

DEMO

讓您的孩子div的inline-block是解決方案。您還需要爲容器指定max-width和min-height屬性，以便重新調整大小以適合您的內容。看到這個解決方案爲

HTML的

<div id="con"> 
    <div id="lo"></div> 
    <div id="tex"></div> 
</div>

CSS-

#con 
{ 
    max-width:310px; 
    min-height:140px; 
    background:yellow; 
    border: 1px solid aqua; 
} 

#lo 
{ 
    width:140px; 
    height:140px; 
    background:green; 
    display:inline-block; 
    vertical-align:bottom; 
} 

#tex 
{ 
    width:160px; 
    height:60px; 
    background:orange; 
    display:inline-block; 
    vertical-align: bottom; 
}

來源

2012-12-15 06:02:43 Cdeez

用於響應屏幕尺寸的CSS div

回答

相關問題