Question

我的垂直导航栏在调整浏览器窗口大小时会显示文本。我已经设置了列，所以我不确定为什么来自另一列的文本与它重叠。所以有人都知道发生了什么事，我已经尝试了“定位：固定＆＃39;没有运气。这是一个非常基本的网站，但任何帮助都是适用的，谢谢。

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Roboto');
.username {
  font-family: Roboto;
  font-size: 14pt;
  vertical-align: top;
  text-align: left;
  padding: 10px;
}

.vertical-nav {
  width: 200px;
  padding-left: 10px;
  position: relative;
}

.vertical-nav a {
  color: inherit;
  display: block;
  text-decoration: none;
  font-family: Roboto;
  font-size: 10pt;
}

.contact-email {}

.contact-email p {
  font-family: Roboto;
  font-size: 10pt;
}

.about-me {}

.about-me p {
  font-family: Roboto;
  font-size: 10pt;
  width: 300px;
}

.column {
  float: left;
}

.left {
  width: 10%;
}

.right {
  width: 75%;
}

.row {}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Ren</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <meta charset="UTF-8">
</head>

<body>
  <div class="row">
    <div class="column left">
      <header>
        <h1>
          <span class="username">Ren</span>
        </h1>
      </header>

      <div class="vertical-nav">
        <a href="#">Work/Concepts</a>
        <a href="#">Instagram</a>
        <a href="#">Soundcloud</a>
      </div>
    </div>

    <div class="column right">
      <div class="contact-email">
        <p>
          email: placeholderhere@gmail.com
        </p>
      </div>

      <div class="about-me">
        <p>
          Creative amature from Australia. Planning on studying audio engineering soon. Currently concept clothing designer.
        </p>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

您指定vertical-nav为200px宽，但.left容器只有10％，因此泄漏的次数较少。因此，你必须决定做什么 - 给出超过10％，并考虑如果没有足够的空间，例如本片段中的文本溢出省略号，或者使链接内联元素带有单词分隔符。

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Roboto');
.username {
  font-family: Roboto;
  font-size: 14pt;
  vertical-align: top;
  text-align: left;
  padding: 10px;
}

.vertical-nav {
  padding-left: 10px;
  position: relative;
}

.vertical-nav a {
  color: inherit;
  display: block;
  text-decoration: none;
  font-family: Roboto;
  font-size: 10pt;
  text-overflow: ellipsis;
  overflow: hidden;
}

.contact-email {}

.contact-email p {
  font-family: Roboto;
  font-size: 10pt;
}

.about-me {}

.about-me p {
  font-family: Roboto;
  font-size: 10pt;
  width: 300px;
}

.column {
  float: left;
}

.left {
  width: 10%;
}

.right {
  width: 75%;
}

.row {}

＆＃13;

<div class="row">
  <div class="column left">

    <header>
      <h1>
        <span class="username">Ren</span>
      </h1>
    </header>


    <div class="vertical-nav">
      <a href="#">Work/Concepts</a>
      <a href="#">Instagram</a>
      <a href="#">Soundcloud</a>
    </div>
  </div>

  <div class="column right">
    <div class="contact-email">
      <p>
        email: placeholderhere@gmail.com
      </p>
    </div>

    <div class="about-me">
      <p>
        Creative amature from Australia. Planning on studying audio engineering soon. Currently concept clothing designer.
      </p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我为该行定义了flexbox，并冒昧地清理了CSS。我将vertical-nav的宽度从10％更改为20％。如果需要，您可以将其更改回来。

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  font-family: Roboto;
  font-size: 10pt;
}

.username {
  font-size: 14pt;
  padding: 0 10px;
}

.vertical-nav {
  padding-left: 10px;
}

.vertical-nav a {
  color: inherit;
  display: block;
  text-decoration: none;
  text-overflow: ellipsis;
  overflow: hidden;
}

.about-me p {
  width: 300px;
}

.left {
  width: 20%;
}

.left h1 {
  margin-top: 0;
}

.right {
  flex: 1 0; /* Grow to use all the space left */
}

.row {
  display: flex;
}

＆＃13;

<div class="row">
  <div class="column left">
    <header>
      <h1>
        <span class="username">Ren</span>
      </h1>
    </header>
    <div class="vertical-nav">
      <a href="#">Work/Concepts</a>
      <a href="#">Instagram</a>
      <a href="#">Soundcloud</a>
    </div>
  </div>
  <div class="column right">
    <div class="contact-email">
      <p>
        email: placeholderhere@gmail.com
      </p>
    </div>
    <div class="about-me">
      <p>
        Creative amature from Australia. Planning on studying audio engineering soon. Currently concept clothing designer.
      </p>
    </div>
  </div>
</div>

＆＃13;

文本不断移动导航

2 个答案: