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

Question

我目前正在为一家商店写一个布局＆＃39;在css中为学校作业，但是当我尝试在商店文本中添加文字时，它会一直向下移动到div的底部。

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

有没有理由说自动换行不适用于此？我将使用什么来获取图像周围的文本（没有移动的东西）

Answer 1

从float移除.shopItem p，然后从width移除#shopTextContainer

* {
  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标记放在<{em} p标记内（请参阅以下代码段中的第一个img）。

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

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

* {
  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>