[英]How to get (h1 + (span)) + (h2) into (span) + (h1) + (h2) …?
很抱歉这篇文章的标题含糊不清,但是……在这个响应式网页上,标题的 HTML 是:
<!-- header -->
<header>
<hgroup>
<!-- space ( ) in <span> is necessary to show background-image (logo)! -->
<h1><txp:site_name /><span> </span></h1>
<h2><txp:site_slogan /></h2>
</hgroup>
</header>
使用text-align:center;
在header
(和其他一些 CSS)上,我得到了我想要的......在广泛的媒体上。 在小型设备上它变得非常混乱(当然)。
我的问题:上面的 HTML 是否可以按以下顺序堆叠(居中)所有内容:
| logo |
| h1 |
| h2 |
...以便它可以很好地适应较小的屏幕?
您可以使用float
属性、 text-align
和clear
来实现这一点,从伪元素中获得很少的帮助:before
http://codepen.io/gcyrillus/pen/rfElA <h1>
文本也被包裹在一个容器中,这里是一个<b>
用于展示的目的。 这是清除文本的唯一方法。
<span>
,应该是带有漂亮alt="trademark logo"
的标志的<img>
,所以它存在:)。
尝试使用 flexbox 模型
就像是:
display: flex; /* Lay out each item using flex layout */
flex-flow: column; /* Lay out item's contents vertically */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.