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

Question

我目前正在为 css 中的 'shop' 编写布局，用于学校作业，但是当我尝试向商店文本添加文本时，它会一直向下移动到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 的底部，这不是它应该的样子，因为我在右边使用了一个浮动，我希望我可以让文本自动转到下一行。

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

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>

Answer 2

试试这个，删除 float: left 并添加 clear: both

.shopItem p { clear: both; word-wrap: break-word; white-space: initial; margin-left; 7px; }

Answer 3

将 img 标签放入标签 p 内（请参阅以下代码段中的第一个 img）。

并使用具有真实字长的盲文来查看它的真实外观。

* {
  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">
          <p>
          <img src="img/shopitems/img1.png">
            Tekst over het winkel product asdas dadadas dadadadasdas dadada dadaas dasda sddada sdadad adasda dasdad asdasd asdada dadada dadasd  asda dada dada dada sdad adad adad adas daad sads adad sdsa dsad saadsadsadsdasdasdasdsadsa</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>

Answer 4

喂。如果你想试试这个解决方案

* {
  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;
  letter-spacing: -.31em;
  text-rendering: optimizespeed;
}
#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;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;
  letter-spacing:normal;
  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>

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

CSS div moves when i add text to it, even when using word-wrap

html

css

word-wrap