Question

因此，当我试图在我的盒子中添加一个段落时，另一个移动..我一直在寻找它的边缘是否有问题，但不是我能看到的。我完全不知道如何解决它。这是我在做某事之前的样子： https://imgur.com/a/lZZq4 这就是我在框中添加一些文本或其他内容的方式 https://imgur.com/a/FXkrf

正如你所看到的，另一个盒子正在移动，我写的越多，它就会越走越远。在此会有一些解释。

HTML CODE：

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Inlamningsuppgift 1</title>
    <link rel="stylesheet" href="css.css">
  </head>
  <body>
  <div id="wrapper">
    <header>
        <h1> Inlamningsuppgift 1 </h1>
    </header>
    <nav id="firstnav">
        <a href="start.html" id="start"> Start </a>
        <a href="filmer.html" id="filmer"> Filmer </a>
        <a href="bildspel.html" id="bildspel"> Bildspel </a>
        <select>
          <option value="Blue"> Blå </option>
          <option value="Red"> Röd </option>
          <option value="Violet"> Lila </option>
        </select>
    </nav>
  <section>
    <h3> Välkommen till min webbplats! </h3>

    <article id="presentation">
      <h4> Vem är skaparen av sidan? </h4>
    </article>

    <article id="anledning">
      <h4> Anledning till att jag gör denna sidan </h4>
      <p> hej
    </article>

    <article id="utmaningar">
      <h4> Tre saker jag tyckt varit utmanande med uppgiften </h4>
      <ul>
        <li> Sak 1 </li>
        <li> Sak 2 </li>
        <li> Sak 3 </li>
      </ul>
    </article>
  </section>
  <footer>

  </footer>
  </div>
  </body>
</html>

CSS代码：

    #wrapper{
    margin-left:auto;
    margin-right:auto;
    width:970px;
}
header{
  background-color: grey;
  text-align: center;
  padding: 10px;
}
#firstnav{
  background-color: black;
  padding: 10px;

}
#start{
  margin-right: 250px;
  text-decoration: none;
  color: white;
}
#filmer{
  margin-right: 150px;
  text-decoration: none;
  color: white;
}
#bildspel{
  text-decoration: none;
  color: white;
}
nav select{
  float: right;
  width:250px;
}
section{
  background-color: grey;
  padding-top: 1px;
  padding-bottom: 40px;
}
section h3{
  text-align: center;
  padding-bottom: 12px;
}
#presentation{
  width: 350px;
  height: 100px;
  background-color: white;
  display: inline-block;
  margin-left: 75px;
  padding-left: 20px;
  clear: both;
}
#presentation img{

  width: 40px;
  height: 40px;
}
#anledning{
  display: inline-block;
  height: 100px;
  background-color: white;
  width: 350px;
  margin-left: 70px;
  padding-left: 20px;
  clear: both;

}
#utmaningar{
  background-color: white;
  width: 850px;
  margin-left: 70px;
}
#utmaningar > h4{
  padding-left: 10px;
  padding-top: 8px;
}
footer{
  text-align: center;
  background-color: black;
  color: white;
  padding: 10px;
}

正在移动的#presentation和#anledning的id。

Answer 1

找出答案：显然，如果你添加

垂直对齐：顶部;

它排除了。

Answer 2

只需使用vertical-align: top

即可

<强> CSS

#presentation {
    width: 350px;
    height: 100px;
    background-color: white;
    display: inline-block;
    margin-left: 75px;
    padding-left: 20px;
    clear: both;
    vertical-align: top;
}

当我写一个im使用时，其他css框正在移动

2 个答案: