0

我的代码笔 http://codepen.io/leongaban/pen/sBvfL

所以有一个奇怪的问题，我试图让#portfoliodiv 的背景拉伸以包含下面的缩略图，这些缩略图位于投资组合 div 内的 ul 列表中。

但是 100% 或 auto 不会影响高度。我必须设置一个静态高度，比如 1000px。让背景覆盖拇指。但是我试图不设置静态高度，因为缩略图会变长。

也许我已经编码太久了，你将如何编码？

HTML

<div id="portfolio">

  <div class="portfolio-nav">
       <h1>Portfolio</h1>
  </div>

        <div id="showcase-holder">

            <div id="showcase-div">

            <ul id="portfolio-thumbs">

                <li>
                    <a href="/portfolio/chipestimate">
                        <img class="role-thumb" src="http://leongaban.com/images/thumb_chipestimate.jpg" alt="ChipEstimate"/>
                        </a><p>ChipEstimate</p>

                </li>

                <li>
                    <a href="/portfolio/shabang" title="Shabang">
                        <img class="role-thumb" src="http://leongaban.com/images/thumb_shabang.jpg" alt="Shabang"/>
                        </a><p>Shabang</p>

                </li>
        </ul>
    </div>
 </div>

CSS

body {
    background: brown;
}

#portfolio {
    position: relative;
    width: 100%;
    height: 50%;
    background: #fff;
    border-top: 2px solid #ccc;
    z-index: 1;
}

#portfolio ul { list-style: none; }

.portfolio-nav { margin: 0 0 20px 0; }

.portfolio-nav h1 {
    padding: 30px 0 10px 0;
    text-align: center;
    font-size: 2.5em;
    font-weight: 700;
    color: #d74927;
    text-shadow: 1px 1px #ccc;
}

#showcase-holder {
    position: relative;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    border-bottom: 2px solid #ccc;
}

#portfolio-thumbs {
    position: relative;
    float: left;
    list-style-type: none;
    margin: 0 0 40px 0;
    padding: 0 0 0 5%;
    width: 100%;
    height: 100%;
}

#portfolio-thumbs li {
    position: relative;
    float: left;
    width: 20%;
    margin: 1%;
    text-align: center;
    padding: 5px 5px 15px 5px;
    background-size: 100% auto;
    overflow: hidden;
    background: white;
    -webkit-transition: background .3s;
    -moz-transition: background .3s;
    -ms-transition: background .3s;
    transition: background .3s;
}

#portfolio-thumbs li:hover {
    color: #fff;
    background: #d74927;
    -webkit-transition: background .5s;
    -moz-transition: background .5s;
    -ms-transition: background .5s;
    transition: background .5s;
}

#portfolio-thumbs li a {
    color: #333;
    text-decoration: none;
}

#portfolio-thumbs li p {
    padding: 10px 0 0 0;
}

#portfolio-thumbs li img.role-thumb {
    width: 95%;
    min-width: 170px;
    padding-top: 5px;
}
4

3 回答 3

2

父母通常会扩大到孩子的高度，但如果孩子是相对的，则不会。

  • 您可以删除位置和浮动来完成扩展。
  • 为了根据定位的孩子扩展 parentdiv 尝试溢出：自动；在#portfolio 上。这将使#portfolio 扩展到其子项的高度。如您的示例的此分支所示。

overflow: auto;实际上会让您的浏览器决定，这通常会将其呈现为overflow: hidden;. 尽管我倾向于使用overflow: auto;滚动条来防止出现问题，因为页面可能稍后会扩展。

于 2013-05-17T15:02:02.627 回答
1

您已添加float到您的li元素，这意味着父级不会扩展以包含这些元素。

您可以通过添加 clearing 来解决此问题div。

<div style="clear:both;"></div>

在showcase-holderdiv 之后。

于 2013-05-17T15:03:46.807 回答
1

添加overflow: hidden到两者#showcase-div，#portfolio-thumbs应该为你做。

http://jsfiddle.net/5SFFP/

于 2013-05-17T15:05:05.740 回答