並排呈現並堆疊的Div

在hero-unit DIV嵌套我想有兩個div在寬屏幕並排呈現，邊，如：疊

|text 30% container width||picture the rest of container width|

和在窄屏幕（智能電話）：

|text full container width| 
|picture full container width|

有什麼想法？

來源

2013-05-01 naio

什麼...... – 2013-05-01 22:35:11

你可以張貼一些截圖或圖表嗎？ – 2013-05-01 22:37:23

你只需要浮動兩個div並使用媒體查詢。請看 – Swordfish0321 2013-05-01 22:37:57

你就不能使用內置的網格系統？

<div class="hero-unit"> 
    <div class="row-fluid"> 
    <div class="span3">text</div> 
    <div class="span9"><img src="img.jpg"></div> 
    </div> 
</div>

來源

2013-05-02 02:44:23 dave

它的工作原理！我確實嘗試過，但是排隊，而不是排隊。 – naio 2013-05-02 13:03:13

使用media queries爲不同大小的屏幕創建不同的樣式。

對於全尺寸屏幕，你可以這樣做：

<div id="left" class="cont"> 
</div> 

<div id="right" class="cont"> 
</div>

CSS：

#left{ 
    float: left; 
    width: 30%; 
} 
#right{ 
    overflow: hidden; 
}

上述佈局將有left DIV浮動到左側，與30%的寬度和正確的div將佔用剩餘空間。

對於手機屏幕，你的CSS會略有不同。

<div id="left" class="cont"> 

</div> 

<div id="right" class="cont"> 

</div>

CSS：

.cont{ 
    width: 100%; 
    float: left; 
    clear: both; 
    /* Margins, padding, etc. */ 
}

來源

2013-05-01 22:37:31

這應該肯定會工作，但我需要學習媒體查詢，因爲我從來沒有使用過它們。我認爲在Bootstrap框架內可以有一個更簡單的解決方案。不管怎麼說，還是要謝謝你。 – naio 2013-05-01 22:52:06

@naio要使用媒體查詢，您只需編寫@media（page-width） - 只要看看我發給你的內容，如果我沒有記錯，引導程序已經使用它們，所以你甚至不需要這樣做。所有你需要做的就是添加我添加的CSS – 2013-05-01 23:06:42

並排呈現並堆疊的Div

回答

相關問題