1

以下の jsFiddle リンクのように記述された HTML レイアウトを、<div>および CSSを使用して作成できません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;
}
4

2 に答える 2

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の組み合わせでこれを実現できます。

乾杯！

于 2012-09-21T07:30:20.583 に答える
-2

あなたの質問を受け取っているので、あなたのdivにfloatを与える必要があります

jsfiddle.net/tKnw9/12

フィドルをチェック

于 2012-09-19T10:41:21.167 に答える