当我的网站达到特定大小时,我希望 Logo 分成两半,以便摄影和设计位于第二行。我将如何做到这一点?
@media only screen and (max-width: 424px) {
}
<nav>
<h1 class="logo">Brian Funderburke Photography & Design</h1>
</nav>
最佳答案
最简单的方法是添加一个跨度,将您想要的内容环绕在自己的行上,然后定位它并为其分配 display: block;
我强烈建议您通过选择适当的类名等方式使它更加健壮。
HTML:
<nav>
<h1 class="logo">Brian Funderburke <span>Photography & Design</span></h1>
</nav>
CSS:
@media only screen and (max-width: 424px) {
.logo span {
display: block;
}
}
关于html - 如何使用媒体查询将文本下拉到第二行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35706052/