Question

我试图解决以下问题：

外部div（＆＃34;容器＆＃34;）不允许高度：auto并且只隐藏包含所有内容的完整div - 但我需要扩展外部div，因为这将是动态的填写清单。

HTML

<div id="container">
  <div id="headline">Headline</div>
  <ul id="u_list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

CSS

#container {
    width: 200px;
    height: auto;
    background-image: -webkit-linear-gradient(top, #333333 0%, #242424 100%);
    position: absolute;
    top: 82px;
    left: 25px;
}
#headline {
    display: block;
    position: absolute;
    top: 12px;
    left: 12px;
    color: white;
}
#u_list {
    list-style-type: none;
    position: absolute;
    top: 20px;
    left: 12px;
    color: white;
    padding-left: 0;
    margin-top: 36px;
}

有什么想法在那里发生了什么？：（

亲切的问候

Answer 1

尝试以下代码：

#container{position:relative;}

Answer 2

尝试删除#u_list和#headline

的位置：绝对值

http://codepen.io/anon/pen/fFsvi

#container {
width: 200px;
height: auto;
background: #333333; /* Old browsers */
background: -moz-linear-gradient(top, #333333 0%, #242424 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#242424)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #333333 0%,#242424 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #333333 0%,#242424 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #333333 0%,#242424 100%); /* IE10+ */
background: linear-gradient(to bottom, #333333 0%,#242424 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#242424',GradientType=0 ); /* IE6-9 */
    position: absolute;
    top: 82px;
    left: 25px;
}

我使用此工具http://www.colorzilla.com/gradient-editor/进行渐变

带渐变背景的容器div不允许高度：auto

2 个答案: