html - CSS 格式/溢出问题

Question

HTML:

<div id="browse_list">
                <div class="browse_list_element">
                    <span class="list_element_logo">
                        Ghre
                    </span>
                    <span class="list_element_name">
                         Ghre
                    </span>
                    <span class="list_element_info">
                         Ghre
                    </span>
                    <span class="list_element_rating">
                         Ghre
                    </span>
                </div>
     <div class="browse_list_element">
                    <span class="list_element_logo">
                        Thre
                    </span>
                    <span class="list_element_name">
                         Thre
                    </span>
                    <span class="list_element_info">
                         Thre
                    </span>
                    <span class="list_element_rating">
                         Thre
                    </span>
                </div>
</div>

CSS:

#browse_list, .browse_list_element
{
    overflow: auto;
    border-style: solid;
    width: 400px;
}
.list_element_logo
{
    width: 100px;
    position: absolute;
    left: 0px;
}
.list_element_name
{
    width: 100px;
    position: absolute;
    left: 100px;
}
.list_element_info
{
    min-width: 150px;
    max-width: 100px;
    position: absolute;
    left: 200px;
}
.list_element_rating
{
    width: 50px;
    position: absolute;
    left: 350px;
}

http://jsfiddle.net/F6xJ2/

我该如何解决这个问题？我想让父级 (.browse_list_element) 取 children 的高度。

Answer 1

这就是你想要的吗？

http://jsfiddle.net/Kyle_Sevenoaks/Yt6Yk/

HTML:(相同)

<div id="browse_list">
                <div class="browse_list_element">
                    <span class="list_element_logo">
                        Ghre
                    </span>
                    <span class="list_element_name">
                         Ghre
                    </span>
                    <span class="list_element_info">
                         Ghre
                    </span>
                    <span class="list_element_rating">
                         Ghre
                    </span>
                </div>
     <div class="browse_list_element">
                    <span class="list_element_logo">
                        Thre
                    </span>
                    <span class="list_element_name">
                         Thre
                    </span>
                    <span class="list_element_info">
                         Thre
                    </span>
                    <span class="list_element_rating">
                         Thre
                    </span>
                </div>
</div>

CSS:

#browse_list, .browse_list_element
{
    overflow: auto;
    border-style: solid;
    width: 400px;
}
.browse_list_element span
{
    display: inline-block;
}

/*.list_element_logo /*commented out, for now
{
    width: 100px;
    position: absolute;
    left: 0px;
}
.list_element_name
{
    width: 100px;
    position: absolute;
    left: 100px;
}
.list_element_info
{
    min-width: 150px;
    max-width: 100px;
    position: absolute;
    left: 200px;
}
.list_element_rating
{
    width: 50px;
    position: absolute;
    left: 350px;
}*/