Question

我在这里有以下CSS代码： http://pastebin.com/EnNLzabw

#maincontent {
    position: relative;
    background-image: url("http://www.viasat.se/sites/all/themes/viasat/images/grey-bg.png");
    width: 100%;
    min-height: 600px;
    overflow: hidden;
}
.box {
    position: absolute;
    width: 252px;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 9px solid #FFFFFF;
    border-radius: 3px;
    text-align: center;
    z-index: 1;
}

.row {
    position: relative;
    min-height: 250px;
    margin-top: 30px;
    margin-bottom: 30px;
}

我有这个HTML： http://pastebin.com/0P5YDJzj

<div id="maincontent">
  <h2>Produkter</h2>
  <div class="row">
    <div class="box">
      <img src="http://91.90.24.136/gymexperten/images/pic2.png">
      <h4>Swedish Supplements F#cked Up</h4>
      <div class="cartbutton">Lägg till</div>
    </div>
    <div class="box">
      <img src="http://91.90.24.136/gymexperten/images/pic1.png">
      <h4>Self Omninutrition Whey Shake 3kg</h4>
      <div class="cartbutton">Lägg till</div>
    </div>
    <div class="box">
      <img src="http://91.90.24.136/gymexperten/images/pic3.png">
      <h4>Optimum Nutrition Platinum Pre</h4>
      <div class="cartbutton">Lägg till</div>
    </div>
    <div class="box">
      <img src="http://91.90.24.136/gymexperten/images/pic4.png">
      <h4>Optimum Nutrition 100% Whey Gold Standard 450g</h4>
      <div class="cartbutton">Lägg till</div>
    </div>
    <div class="box">
      <img src="http://www.proteinbolaget.se/shop/thumbnails/shop/26329/art29/h9635/21549635-origpic-5c59fc.png_0_0_100_100_172_160_85.png">
      <h4>BMR Sports Nutrition Duzixon 180 kapslar</h4>
      <div class="cartbutton">Lägg till</div>
    </div>
  </div>
</div>

主要内容不想扩展，同时添加更多内容。我无法弄清楚问题是什么。

Answer 1

内容正在扩大。你有溢出：#maincontent上的隐藏设置，你的内容溢出并隐藏起来。

据我所知，你需要的主要修正是：

.box {
  /* remove this ---> position: absolute */
  /* use one of these instead: */
  float: left;
  display: inline-block;
  display: table-cell;
}

/* pick one of these to fix your image that is way too large */
#banner img {
  width: 100%;
}
#banner {
  overflow: hidden;
}

在内容增长时扩展div

1 个答案: