如何将固定高度和宽度设置为div

Question

我已经看过很多已经被问过的问题,但找不到和回答的问题对我有用.我正在尝试制作一个中间有一个&符号的徽标.Ampersand应该每隔几秒就改变一次字体系列.唯一的问题是,现在当它改变字体时,它会弄乱谁的页面.

https://codepen.io/anon/pen/BVddWV

主要问题来自CSS中的第21行

.ampersand{
  display:inline;
  width:35px;
  max-width:35px;
  height:79px;
  max-height: 79px;
  font-family:"Exo", sans-serif;
}

有任何想法吗？

Answer 1

在<b>标签上添加了display:flex 并删除了&符号样式,并将其作为span一个div而不是div添加line-height: 1到其中.

.ampersand {
  line-height: 1;
  display: inline-block;
  width: 60px;
  transition: all 1s;
}

<b display: flex;>Flo<span class="ampersand">&</span>Behold</b>

$(document).ready(function() {
  var fonts = ['Dosis', 'Exo', 'Gloria Hallelujah', 'PT Sans', 'PT Serif', 'Yaanone Kaffeesatz'];
  var counter = 0;
  var inst = setInterval(change, 2000);

  function change() {
    if (counter > fonts.length) {
      counter = 0;
    }
    font_selection = fonts[counter];
    $('.ampersand').css("font-family", font_selection);
    counter++;
  }
});

@import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css?family=Molengo');
@import url('https://fonts.googleapis.com/css?family=Dosis|Exo|Gloria+Hallelujah|PT+Sans|PT+Serif|Yanone+Kaffeesatz');
* {
  font-family: "Gill Sans", sans-serif;
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #f5f6fa;
}

#header {
  width: 100%;
  padding: 4% 0px 20px 0px;
}

.logo_text {
  font-family: "Molengo", sans-serif;
  font-size: 70px;
  color: #333;
}

.ampersand {
  line-height: 1;
  display: inline-block;
  width: 60px;
  transition: all 1s;
}

.nav {
  width: 100%;
  padding: 25px 0px 25px 0px;
}

.nav>ul {
  padding-top: 15px;
}

.nav>ul>a {
  text-decoration: none;
  color: #333;
}

.nav>ul>a>li {
  color: #333;
  font-size: 25px;
  padding: 20px 30px 20px 30px;
  display: inline;
  transition: border 0.1s linear;
  border: 3px solid #f5f6fa;
}

.nav>ul>a>li:hover {
  border: 3px solid #333;
}

#body {
  padding-top: 35px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrapper" align="center">

  <div id="header">
    <div class="logo">
      <span class="logo_text"><b display: flex;>Flo<span class="ampersand">&</span>Behold</b>
      </span>
    </div>
    <div class="nav">
      <ul>
        <a href="#">
          <li>Home</li>
        </a>
        <a href="#">
          <li>About</li>
        </a>
        <a href="#">
          <li>Music</li>
        </a>
        <a href="#">
          <li>Media</li>
        </a>
        <a href="#">
          <li>Contact</li>
        </a>
      </ul>
    </div>
  </div>
  <div id="body"></div>
</div>