Question

我是HTML和CSS的新手，我正在尝试构建一个简单的网站。我选择该页面是相对的，但在这里我偶然发现了一个问题，当浏览器恢复时容器和标题的宽度发生了变化，而不是段落（id =“slogan”）。根据浏览器大小，Slogan之后的点经过容器的右边界（image link）。

我真的很感激你对我出错的地方的看法。谢谢，

@charset "utf-8";
 #container {
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 50px;
  margin-bottom: 50px;
  position: relative;
  width: auto;
  height: auto;
  background-color: #E1E1E1;
  border-width: thin;
  border-style: solid;
}
#koke {
  width: auto;
  height: 150px;
  border-width: thin;
  border-style: dotted;
  background-color: #AC9441;
}
#logo {
  margin-top: -50px;
}
#slogan {
  margin-left: 120px;
  position: relative;
}

<body>

  <div id="container">
    <header id="koke">
      <p id="slogan">
        Slogan .............................................................................................
      </p>
      <img src="img205.jpg" alt="" width="100" height="120" id="logo" />
    </header>

    <nav id="menu">
      <p>Menu | Menu | Menu</p>

    </nav>

    <main id="main">Content.....</main>

  </div>
</body>

Answer 1

您可以添加到CSS：

#koke p{
  overflow-wrap: break-word;
}

这将强制段落文本包含在标题部分

中

相对网站布局不适用于段落

1 个答案: