垂直排列時的中心元素內容

我在嘗試製作響應式網站。我希望當水平尺寸減少到一個點，當這些div不再在同一行上，內容在頁面上居中。我可以設置@media (max-width:並將其設置爲任意數字，但由於內容不斷變化，這些div的寬度可能會發生變化。垂直排列時的中心元素內容

HTML：

<div class="cool"> 
    <h1>Foo</h1> 
</div> 
<div class="story"> 
    <h1>Bar</h1> 
</div>

CSS：

.cool { 
    float: left; 
} 
.story { 
    float: right; 
}

演示：http://jsfiddle.net/a0vk35yc/1/

更新：更好的演示。

來源

2014-11-22 cycron

當div的寬度根據內容而變化時，您需要使用JavaScript「計算」寬度，並根據JavaScript的輸出動態更改媒體查詢。 – 2014-11-22 19:03:27

要麼@ThomasBormans說或使用百分比 – ggdx 2014-11-22 19:04:31

@ dwhite.me你會如何使用百分比呢？ – cycron 2014-11-22 21:44:06

邏輯上，頁面上的元素必須具有某種最小內容寬度，否則它們將總是並排放置並縮小到任何像素寬度。

在頁面流完成之前，這個最小寬度可能是未知的，因此您需要在一個document.onLoad Javascript處理程序中執行此操作。計算left_min_width和right_min_width並設置一個斷點爲(left_min_width+right_min_width)px的媒體查詢。

來源

2014-11-22 19:06:55

謝謝。我對JS有最少的理解，並希望這不需要它。我現在正在學習JS，但直到那時我纔會使用@ @ media。 – cycron 2014-11-22 19:12:25

垂直排列時的中心元素內容

回答

相關問題