Question

当我的网站达到特定尺寸时，我希望徽标分成两半，以便摄影＆amp;设计在第二行。我该如何做到这一点？

＆＃13;

@media only screen and (max-width: 424px) {
    
}

＆＃13;

<nav>
        <h1 class="logo">Brian Funderburke Photography &amp; Design</h1>  
</nav>

＆＃13;

Answer 1

最简单的方法是添加一个包围你自己想要的东西的范围，然后定位它，然后分配它display: block;

我强烈建议您通过正确选择类名等使其更加强大。

HTML：

<nav>
  <h1 class="logo">Brian Funderburke <span>Photography &amp; Design</span></h1>
</nav>

CSS：

@media only screen and (max-width: 424px) {
  .logo span {
    display: block;
  }
}

https://jsfiddle.net/6vcbdqqk/

Answer 2

如果只是关于这个非常h1这个文本，那么设置一个width来强制文本换行。

＆＃13;

@media only screen and (max-width: 424px) {
  h1 {
    width: 10em;
  }
}
.demo {
  width: 10em;
  border: solid;
  /* remove this, demo purpose */
}

＆＃13;

<nav>
  <h1 class="logo">Brian Funderburke Photography &amp; Design</h1> 
</nav>
<p>below for demo</p>
<h2 class="demo">Brian Funderburke Photography &amp; Design</h2> 
<h3 class="demo">Brian Funderburke Photography &amp; Design</h3> 
<p class="demo">Brian Funderburke Photography &amp; Design</p>

＆＃13;

如何使用媒体查询将文本下拉到第二行？

2 个答案: