如何將（H1 +（跨度））+（H2）變爲（跨度）+（H1）+（H2）...？

對不起，這個職位的神祕稱號，但是......對this responsive webpage頭的HTML是：如何將（H1 +（跨度））+（H2）變爲（跨度）+（H1）+（H2）...？

<!-- header --> 
<header> 
<hgroup> 
<!-- space (&nbsp;) in <span> is necessary to show background-image (logo)! --> 
<h1><txp:site_name /><span>&nbsp;</span></h1> 
<h2><txp:site_slogan /></h2> 
</hgroup> 
</header>

隨着text-align:center;上header（和其他一些CSS）我得到我想要的......上這是廣泛的媒體。在小型設備上，它變得非常混亂（偏離過程）。

我的問題：是否有可能與上述HTML堆疊順序（中心）的一切：

| logo | 
| h1 | 
| h2 |

...所以它能夠很好地適應較小的屏幕？

來源

2013-06-24 redfox

查找到Flexbox的模型 – raam86

嘗試使用Flexbox的模型

類似：

display: flex;  /* Lay out each item using flex layout */ 
    flex-flow: column; /* Lay out item's contents vertically */

This generator may help

來源

2013-06-24 21:01:33 raam86

我從未使用過flexbox。發電機很安靜。 – redfox

你可以做到這一點使用float財產，text-align和clear得到一點幫助從僞元素:before

http://codepen.io/gcyrillus/pen/rfElA<h1>文本是在容器包裝過，這裏<b>爲展會的目的。這是清除文本的唯一方法。

<span>，應該是一個<img>徽標與一個不錯的alt="trademark logo"，所以它存在:)。

來源

2013-06-24 20:51:43

如果這個CSS是細跟你，使用媒體查詢來設置它需要的時候這裏的/ :)，佈局，顯示：flex肯定會是一個很好的。 –

好吧，您使用的是flexbox，它適用於FireFox，但不適用於Chrome。我想一個前綴的問題。也許你知道這已經？ http://flexiejs.com/playground/或這一個http://the-echoplex.net/flexyboxes/ –

對不起......我與Flexbox的擺弄。現在我回來了你的浮動解決方案。在你的codepen中它正在工作...不在[我的頁面]（http://goo.gl/d7vVi）。你會看看HTML和[CSS]（http://goo.gl/l3pKn）。謝謝！ – redfox

如何將（H1 +（跨度））+（H2）變爲（跨度）+（H1）+（H2）...？

回答

相關問題