html - 当我向其添加文本时，CSS div 会移动，即使在使用自动换行时也是如此

Question

我目前正在用 css 为学校作业编写“商店”布局，但是当我尝试向商店文本添加文本时，它会一直向下移动到 div 的底部。

* {
  padding: 0px;
  margin: 0px;
}
html {
  min-width: 1630px;
  width: 100%;
  height: 100%;
}
#head {
  margin-top: .5%;
  width: 87%;
  margin-left: 6.5%;
  height: 120px;
  background-color: rgb(241, 181, 0);
}
#head img {
  margin-left: 15px;
  margin-top: 10px;
  width: 140px;
  height: 90px;
}
#head h3 {
  font-size: 36px;
  margin-top: -4%;
  margin-left: 45%;
}
#head p {
  margin-left: 47.4%;
  font-size: 18px;
}
#nav {
  width: 87%;
  word-wrap: break-word;
  margin-left: 6.5%;
  background-color: rgb(187, 187, 187);
  float: left;
}
#nav ul {
  display: flex;
}
#nav li {
  padding-left: 45px;
  padding-right: 45px;
  list-style: none;
}
#nav a:hover {
  background-color: rgb(205, 205, 205);
}
#nav a {
  width: 1440px;
  margin-left: 1em;
  color: #000;
  font-size: 1.8em;
  text-decoration: none;
}
#nav-right {
  margin-left: 25%;
  float: right;
}
#content {
  display: inline-block;
  overflow: visible;
  background-color: rgb(241, 181, 0);
  width: 87%;
  height: auto;
  margin-left: 6.5%;
}
#gallery {
  position: relative;
  margin-top: 2%;
  margin-left: 15%;
  width: 69%;
  height: 335px;
  background-color: #131313;
}
#gallery img {
  width: 100%;
  height: 100%;
}
.galleryBTN {
  cursor: pointer;
  position: absolute;
  margin-top: -21.4%;
  text-align: center;
  background-color: rgb(187, 187, 187);
  width: 6%;
  margin-left: 94%;
  height: 150px;
  text-decoration: none;
}
.galleryBTN ~ .galleryBTN {
  margin-left: 0%;
}
.galleryBTN p {
  color: #000;
  text-decoration: none;
  margin-top: 65px;
}
#webInfo {
  min-height: 400px;
  background-color: rgb(218, 166, 7);
  float: left;
  margin-top: 5%;
  margin-left: 5%;
  width: 50%;
  height: 25%;
  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
#webInfo p {
  font-size: 18px;
  margin-left: 1%;
  overflow: hidden;
}
#addr {
  min-height: 400px;
  background-color: rgb(218, 166, 7);
  overflow: hidden;
  float: right;
  margin-top: 5%;
  margin-right: 2%;
  width: 40%;
  height: 25%;
  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
#addr img {
  width: 340px;
  height: 320px;
  margin-top: 5%;
  margin-right: 5%;
  float: right;
}
#addr p {
  font-size: 32px;
  text-align: right;
  margin-right: 12px;
  margin-top: 20%;
  float: right;
  margin-left: 4px;
  font-size: 16;
}
#separator {
  margin-top: 625px;
  background-color: #000;
  border: 1px solid #000;
}
.partner {
  display: inline-block;
  margin-top: 2%;
  margin-left: 5.4%;
  margin-right: 3%;
  width: 180px;
  height: 210px;
}
.partner img {
  width: 180px;
  height: 180px;
}
.partner p {
  margin-top: 10px;
  text-align: center;
}
.prices {
  display: inline-block;
  background-color: rgb(218, 166, 7);
  margin-top: 3%;
  margin-left: 5%;
  width: 42%;
  height: 125px;
  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
.prices img {
  float: left;
  margin-top: 2%;
  margin-left: 2%;
  width: 90px;
}
.prices p {
  float: right;
  margin-right: 62%;
  margin-top: 10px;
}
#shop {
  margin-top: 2%;
  margin-left: 5%;
  background-color: rgb(218, 166, 7);
  width: 90%;
  min-height: 960px;
  height: 100%;
  overflow: hidden;
  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
#shoppingCart {
  margin-top: 30px;
  display: inline-block;
  margin-left: 87%;
}
#shoppingCart img {
  float: right;
  width: 55px;
  height: 55px;
}
#shoppingCart p {
  float: left;
  margin-top: 20px;
}
.shopItem {
  overflow: hidden;
  display: inline-block;
  background-color: rgb(218, 166, 7);
  margin-top: 3%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  width: 27%;
  height: 25%;
  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
.shopItem img {
  float: left;
  margin-left: 3%;
  margin-top: 3%;
  width: 120px;
  height: 140px;
}
.shopItem p {
  word-wrap: break-word;
  white-space: initial;
  float: left;
  margin-left: 7px;
}
#shopTextContainer {
  width: 100%;
  height: 82%;
  overflow: hidden;
}
.shopItem a {
  background-color: #FFF;
  color: #000;
  text-decoration: none;
  margin-top: 1.2%;
  padding: 7px;
  margin-right: 36%;
  float: right;
}
#pageNumber {
  margin-top: 2%;
  text-align: center;
  width: 100%;
  height: 40px;
  font-size: 23px;
}
footer {
  margin-top: 5px;
  background-color: rgb(187, 187, 187);
  text-align: center;
  width: 87%;
  font-size: 26px;
  margin-left: 6.5%;
  margin-bottom: .5%;
  height: 35px;
}

<html>

<head>
  <title>Bigfoot bar - home</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style/style.css">
  <link rel="icon" href="img/logo.png" type="image/x-icon" />
</head>

<body>
  <div id="container">
    <div id="head">
      <img src="img/logo.png" />
      <h3>Bigfoot bar</h3>
      <p>Een slogan hier</p>
    </div>
    <div id="nav">
      <ul>
        <a href="index.php">
          <li>Home</li>
        </a>
        <a href="prices.php">
          <li>Prices</li>
        </a>
        <a href="shop.php">
          <li>Shop</li>
        </a>
        <a href="agenda.php">
          <li>Agenda</li>
        </a>
        <a href="team.php">
          <li>Team</li>
        </a>
        <a href="slopes.php">
          <li>Slopes</li>
        </a>
        <a href="login.php">
          <li>Login/register</li>
        </a>
      </ul>
    </div>
    <div id="content">
      <div id="shoppingCart">
        <p>{Aantal artikelen}</p>
        <img src="img/cart.png">

      </div>
      <div id="shop">
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product asdasdadadasdadadadasdasdadadadadaasdasdasddadasdadadadasdadasdadasdasdasdadadadadadadasdasdadadadadadadasdadadadadadadasdaadsadsadadsdsadsadsaadsadsadsdasdasdasdsadsa</p>
          <a href="?addItem=0">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <div id="shopTextContainer">
            <p>Tekst over het winkel product asdasdadadasdadadadasdasdadadadadaasdasdasddadasdadadadasdadasdadasdasdasdadadadadadadasdasdadadadadadadasdadadadadadadasdaadsadsadadsdsadsadsaadsadsadsdasdasdasdsadsa</p>
          </div>
          <a href="?addItem=1">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=2">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=3">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=4">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=5">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=6">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=7">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=8">Add to cart</a>
        </div>
      </div>
      <div id="pageNumber">
        <a href="?page=1">1</a>
        <a href="?page=2">2</a>
        <a href="?page=3">3</a> |
        <a href="?page=999">999</a>
      </div>
    </div>
    <footer>Een geweldig copyright bericht</footer>
</body>

</html>

正如你在这个片段中看到的，带有大量文本的 div 将被放在 div 的底部，这不是它应该的样子，因为我在右边使用了一个 float ，我预计我可以使文本自动转到下一行。

是否有自动换行不适用于此的原因？我会用什么来代替图像周围的文字(没有东西移动)

Answer 1

从 .shopItem p 中删除 float 并从 #shopTextContainer 中删除 width

* {
  padding: 0px;
  margin: 0px;
}
html {
  min-width: 1630px;
  width: 100%;
  height: 100%;
}
#head {
  margin-top: .5%;
  width: 87%;
  margin-left: 6.5%;
  height: 120px;
  background-color: rgb(241, 181, 0);
}
#head img {
  margin-left: 15px;
  margin-top: 10px;
  width: 140px;
  height: 90px;
}
#head h3 {
  font-size: 36px;
  margin-top: -4%;
  margin-left: 45%;
}
#head p {
  margin-left: 47.4%;
  font-size: 18px;
}
#nav {
  width: 87%;
  word-wrap: break-word;
  margin-left: 6.5%;
  background-color: rgb(187, 187, 187);
  float: left;
}
#nav ul {
  display: flex;
}
#nav li {
  padding-left: 45px;
  padding-right: 45px;
  list-style: none;
}
#nav a:hover {
  background-color: rgb(205, 205, 205);
}
#nav a {
  width: 1440px;
  margin-left: 1em;
  color: #000;
  font-size: 1.8em;
  text-decoration: none;
}
#nav-right {
  margin-left: 25%;
  float: right;
}
#content {
  display: inline-block;
  overflow: visible;
  background-color: rgb(241, 181, 0);
  width: 87%;
  height: auto;
  margin-left: 6.5%;
}
#gallery {
  position: relative;
  margin-top: 2%;
  margin-left: 15%;
  width: 69%;
  height: 335px;
  background-color: #131313;
}
#gallery img {
  width: 100%;
  height: 100%;
}
.galleryBTN {
  cursor: pointer;
  position: absolute;
  margin-top: -21.4%;
  text-align: center;
  background-color: rgb(187, 187, 187);
  width: 6%;
  margin-left: 94%;
  height: 150px;
  text-decoration: none;
}
.galleryBTN ~ .galleryBTN {
  margin-left: 0%;
}
.galleryBTN p {
  color: #000;
  text-decoration: none;
  margin-top: 65px;
}
#webInfo {
  min-height: 400px;
  background-color: rgb(218, 166, 7);
  float: left;
  margin-top: 5%;
  margin-left: 5%;
  width: 50%;
  height: 25%;
  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
#webInfo p {
  font-size: 18px;
  margin-left: 1%;
  overflow: hidden;
}
#addr {
  min-height: 400px;
  background-color: rgb(218, 166, 7);
  overflow: hidden;
  float: right;
  margin-top: 5%;
  margin-right: 2%;
  width: 40%;
  height: 25%;
  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
#addr img {
  width: 340px;
  height: 320px;
  margin-top: 5%;
  margin-right: 5%;
  float: right;
}
#addr p {
  font-size: 32px;
  text-align: right;
  margin-right: 12px;
  margin-top: 20%;
  float: right;
  margin-left: 4px;
  font-size: 16;
}
#separator {
  margin-top: 625px;
  background-color: #000;
  border: 1px solid #000;
}
.partner {
  display: inline-block;
  margin-top: 2%;
  margin-left: 5.4%;
  margin-right: 3%;
  width: 180px;
  height: 210px;
}
.partner img {
  width: 180px;
  height: 180px;
}
.partner p {
  margin-top: 10px;
  text-align: center;
}
.prices {
  display: inline-block;
  background-color: rgb(218, 166, 7);
  margin-top: 3%;
  margin-left: 5%;
  width: 42%;
  height: 125px;
  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
.prices img {
  float: left;
  margin-top: 2%;
  margin-left: 2%;
  width: 90px;
}
.prices p {
  float: right;
  margin-right: 62%;
  margin-top: 10px;
}
#shop {
  margin-top: 2%;
  margin-left: 5%;
  background-color: rgb(218, 166, 7);
  width: 90%;
  min-height: 960px;
  height: 100%;
  overflow: hidden;
  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
#shoppingCart {
  margin-top: 30px;
  display: inline-block;
  margin-left: 87%;
}
#shoppingCart img {
  float: right;
  width: 55px;
  height: 55px;
}
#shoppingCart p {
  float: left;
  margin-top: 20px;
}
.shopItem {
  overflow: hidden;
  display: inline-block;
  background-color: rgb(218, 166, 7);
  margin-top: 3%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  width: 27%;
  height: 25%;
  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}
.shopItem img {
  float: left;
  margin-left: 3%;
  margin-top: 3%;
  width: 120px;
  height: 140px;
}
.shopItem p {
  word-wrap: break-word;
  white-space: initial;
  /*float: left;*/
  margin-left: 7px;
}
#shopTextContainer {
  /*width: 100%;*/
  height: 82%;
  overflow: hidden;
}
.shopItem a {
  background-color: #FFF;
  color: #000;
  text-decoration: none;
  margin-top: 1.2%;
  padding: 7px;
  margin-right: 36%;
  float: right;
}
#pageNumber {
  margin-top: 2%;
  text-align: center;
  width: 100%;
  height: 40px;
  font-size: 23px;
}
footer {
  margin-top: 5px;
  background-color: rgb(187, 187, 187);
  text-align: center;
  width: 87%;
  font-size: 26px;
  margin-left: 6.5%;
  margin-bottom: .5%;
  height: 35px;
}

<html>

<head>
  <title>Bigfoot bar - home</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style/style.css">
  <link rel="icon" href="img/logo.png" type="image/x-icon" />
</head>

<body>
  <div id="container">
    <div id="head">
      <img src="img/logo.png" />
      <h3>Bigfoot bar</h3>
      <p>Een slogan hier</p>
    </div>
    <div id="nav">
      <ul>
        <a href="index.php">
          <li>Home</li>
        </a>
        <a href="prices.php">
          <li>Prices</li>
        </a>
        <a href="shop.php">
          <li>Shop</li>
        </a>
        <a href="agenda.php">
          <li>Agenda</li>
        </a>
        <a href="team.php">
          <li>Team</li>
        </a>
        <a href="slopes.php">
          <li>Slopes</li>
        </a>
        <a href="login.php">
          <li>Login/register</li>
        </a>
      </ul>
    </div>
    <div id="content">
      <div id="shoppingCart">
        <p>{Aantal artikelen}</p>
        <img src="img/cart.png">

      </div>
      <div id="shop">
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product asdasdadadasdadadadasdasdadadadadaasdasdasddadasdadadadasdadasdadasdasdasdadadadadadadasdasdadadadadadadasdadadadadadadasdaadsadsadadsdsadsadsaadsadsadsdasdasdasdsadsa</p>
          <a href="?addItem=0">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <div id="shopTextContainer">
            <p>Tekst over het winkel product asdasdadadasdadadadasdasdadadadadaasdasdasddadasdadadadasdadasdadasdasdasdadadadadadadasdasdadadadadadadasdadadadadadadasdaadsadsadadsdsadsadsaadsadsadsdasdasdasdsadsa</p>
          </div>
          <a href="?addItem=1">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=2">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=3">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=4">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=5">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=6">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=7">Add to cart</a>
        </div>
        <div class="shopItem">
          <img src="img/shopitems/img1.png">
          <p>Tekst over het winkel product</p>
          <a href="?addItem=8">Add to cart</a>
        </div>
      </div>
      <div id="pageNumber">
        <a href="?page=1">1</a>
        <a href="?page=2">2</a>
        <a href="?page=3">3</a> |
        <a href="?page=999">999</a>
      </div>
    </div>
    <footer>Een geweldig copyright bericht</footer>
</body>

</html>