html - CSS GridView问题

我在使用CSS代码时发生了问题，并且看起来不像我想要的那样。我在帖子上附加了一个链接，以查看其外观，并附有一张图片，以查看现在的外观。我要发布HTML代码和CSS代码。我试图找到自己在做错的事情，但是花了两个小时，试图找到问题所在之后，我终于放弃了，我开始寻求帮助。

How it should look like

Current design

的HTML

<header>
  <img src="pc_logo.png" alt="Pandaisia Chocolates" />
  <nav class="horizontal">
    <ul>
      <li><a href="pc_home.html">Home</a></li>
      <li><a href="#">The Store</a></li>
      <li><a href="#">My Account</a></li>
      <li><a href="#">Specials</a></li>
      <li><a href="#">Reviews</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</header>
<div class="newRow">
  <div class="col-2-3">
    <article id="intro">
      <h1>March Specials</h1>
      <p>Spring is coming and we've got some mouth-watering specials to help you celebrate the change in seasons in style! Featured throughout March is our always-popular Chocolate Covered Strawberries / Rose Fruit Syrup Combo, now at the special low price
        of $29.95. For that special someone, consider our Red Rose Select box of Spring chocolates. Remember that for every order of $25 or more, you receive a free truffle of your choice. For orders of $100 or more we throw in a four-piece gift box of
        our signature chocolates and truffles.</p>
    </article>
    <div class="newRow">
      <div class="col-1-3 specials">
        <img src="pc_photo7.png" alt="" />
        <h1>Red Rose Select</h1>
        <p>A classic collection of 18 signature chocolates served with a romantic red rose for the special person in your life. One of our most popular box sets.</p>
        <p>$24.95</p>
        <p><a href="#">Order Now</a></p>
      </div>
      <div class="col-1-3 specials">
        <img src="pc_photo8.png" alt="" />
        <h1>Your Choice</h1>
        <p>Build your own collection of signature truffles and chocolates. Now you can choose old favorites from our 24-year history of award-winning chocolates and sweets.</p>
        <p>$32.55</p>
        <p><a href="#">Order Now</a></p>
      </div>
      <div class="col-1-3 specials">
        <img src="pc_photo9.png" alt="" />
        <h1>Praline Signatures</h1>
        <p>Delicious chocolate with delicious pralines presented in a beautiful and elegant box. Enjoy this fantastic collection inspired by the best Parisian chocolate shops.</p>
        <p>$39.23</p>
        <p><a href="#">Order Now</a></p>
      </div>
    </div>
  </div>
  <div class="col-1-3" id="awardList">
    <h1>Awards</h1>
    <div class="awards" id="award1">
      <img src="pc_award1.png" alt="" />
      <p>Best of Show</p>
      <p>Confectioners Association</p>
    </div>
    <div class="awards" id="award2">
      <img src="pc_award2.png" alt="" />
      <p>Five Stars</p>
      <p>Confectioner Quarterly</p>
    </div>
    <div class="awards" id="award3">
      <img src="pc_award3.png" alt="" />
      <p>Best Chocolate</p>
      <p>Food World</p>
    </div>
    <div class="awards" id="award4">
      <img src="pc_award4.png" alt="" />
      <p>Best Chocolate</p>
      <p>Choco-Fest</p>
    </div>
    <div class="awards" id="award5">
      <img src="pc_award4.png" alt="" />
      <p>Best Dessert</p>
      <p>Choco-Fest</p>
    </div>
  </div>
</div>
<footer>
  Pandaisia Chocolates &copy; 2017 All Rights Reserved
</footer>

的CSS

body {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
  min-width: 640px;
  width: 95%;
}


/* Image Styles */

body img {
  display: block;
  width: 100%;
}


/* Horizontal Navigation Styles */

body>header>nav.horizontal li {
  width: 16.66%;
}

nav.horizontal li {
  display: block;
  float: left;
}

nav a {
  display: block;
}


/* Row Styles */

div.newRow {
  clear: both;
  width: 100%;
}

div.newRow:after {
  clear: left;
  content: "";
  display: table;
}


/* Column Styles */

div[class^="col-"] {
  float: left;
  padding: 2%;
}

div.col-1-1 {
  width: 100%;
}

div.col-1-2 {
  width: 50%;
}

div.col-1-3 {
  width: 33.33%;
}

div.col-2-3 {
  width: 67.67%;
}

div.col-1-4 {
  width: 25%;
}

div.col-3-4 {
  width: 75%;
}

div[class^="col-"]:after {
  clear: left;
  content: "";
  display: table;
}


/* Specials Styles */

div {
  min-height: 400px;
  outline: 1px dashed rgb(71, 52, 29);
}


/* Award Styles */

div#awardList {
  position: relative;
  height: 650px;
  overflow: auto;
}

div.awards>div#award1 {
  top: 80px;
  left: 5%;
}

div.awards>div#award2 {
  top: 280px;
  left: 60%;
}

div.awards>div#award3 {
  top: 400px;
  left: 20%;
}

div.awards>div#award4 {
  top: 630px;
  left: 45%;
}

div.awards>div#award5 {
  top: 750px;
  left: 5%;
}


/* Footer Styles */

body>footer {
  clear: both;
}

最佳答案

您为.col-2-3使用了错误的宽度值，即width: 67.67% ...

....由于col-1-3具有width: 33.33%而col-2-3具有width: 67.67% ..这意味着整个宽度将为33.33%+67.67%=101% ...应为100％...

应该是width: 66.67% ...也要应用box-sizing:border-box

div.col-2-3 {
  width: 66.67%;
}

Fiddle Link

关于html - CSS GridView问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48692581/