css - HTML/CSS：浮动 div 高度和底部垂直对齐

Question

我无法使用<div>和 CSS制作下面 jsFiddle 链接中描述的 HTML 布局float。使用table标签我可以解决这个问题，但我需要 DIV+CSS 解决方案。这是可能的？任何人都可以帮忙吗？

HTML：

<div class="container">

<div class="column">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

 <div>

Something on top

</div>

    <div id="bottom-content" style="background-color: #FA0">

Something with vertical align = bottom AND height == height of left column

</div>

</div>

CSS：

.container {
    overflow: hidden;
}
.column {
    float: left;
    background-color: grey;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

现场演示：jsFiddle

解决方案：

HTML：

<div class="container">

<div class="column">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

 <div style="float:left; height:82px">

Something on top

</div> 

    <div id="bottom-content" style="background-color: #FA0; float:left;">

Something with vertical align = bottom AND height == height of left column

</div>

</div>

CSS：

.container {
    overflow: hidden;
}
.column {
    float: left;
    background-color: grey;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

Answer 1

我猜可以使用以下代码来实现布局（即https://dl.dropbox.com/u/2325784/example_layout.png ）：

.container {
    width:900px;
    overflow: hidden;
}
.picture{
    float:left;
    width:220px;
}
.column {
    width:320px;
    float: left;
    background-color: grey;
}

＆HTML是：

<div class="container">
    <div class="picture">Picture</div>
    <div class="column">
        <table>
            <tr>
                <td>Genere</td>
                <td>Arcade</td>
            </tr>
            <tr>
                <td>Developer</td>
                <td>Micheal A. Denio</td>
            </tr>
            <tr>
                <td>Publisher</td>
                <td>Micheal A. Denio</td>
            </tr>
            <tr>
                <td>Released</td>
                <td>1988</td>
            </tr>
            <tr>
                <td>Platform</td>
                <td>DOS</td>
            </tr>
            <tr>
                <td>Rating 1</td>
                <td>Rating Picture will goes here</td>
            </tr>
            <tr>
                <td>Rating 2</td>
                <td>Rating2 Pic will goes here</td>
            </tr>
        </table>
    </div>
</div>

如果您不想使用表格，您可以通过ul&li组合来实现。

干杯!

Answer 2

当我得到你的问题时。你需要在你的 div 上给出浮动

jsfiddle.net/tKnw9/12

检查小提琴