Question

我无法使用<div>和CSS float在下面的jsFiddle链接中描述HTML布局。使用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＆amp; li组合。

干杯！

Answer 2

因为我得到了你的问题。你需要在你的div上浮动

jsfiddle.net/tKnw9/12

检查小提琴

HTML / CSS：浮动divs高度和底部垂直对齐

2 个答案: