2

很抱歉这篇文章的标题晦涩难懂，但是......在这个响应式网页上，标题的 HTML 是：

<!-- 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;on header（和其他一些 CSS）我得到了我想要的……在广泛的媒体上。在小型设备上它变得非常混乱（当然）。

我的问题：上面的 HTML 是否可以按以下顺序堆叠（中心）所有内容：

| logo |
|  h1  |
|  h2  |

...这样它就可以很好地适应较小的屏幕？

4

2 回答 2

0

尝试使用 flexbox 模型

就像是：

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

这个生成器可能会有所帮助

于 2013-06-24T21:01:33.473 回答
0

float您可以使用属性来实现这一点，text-align并且clear从伪元素中获得的帮助很少:before

http://codepen.io/gcyrillus/pen/rfElA <h1>文本也被包装在一个容器中，这里是<b>为了展示。这是清除文本的唯一方法。

<span>，应该是一个 <img>带有nice的标志alt="trademark logo"，所以它存在:)。

于 2013-06-24T20:51:43.500 回答