0

テーブル ビューをフローティング ビューに変換しようとしています。2 つの列があり、最初の列には 1 つの行があり、2 番目の列には 2 つの行があります。最初の列の行を伸ばして、2 番目の列の 2 つの行にまたがるようにします。

現在、私のHTMLはこれです：

<div class="row">
<div class="span1" style="background-color: #FF0000">
    First column with single row goes here
</div>
<div class="span11">
    <div class="row">
        <div class="span12" style="background-color: #00FF00"> 
            First row of second column goes here
        </div>
    </div>
    <div class="row">
        <div class="span12" style="background-color: #0000FF">
            Second row of second column goes here
        </div>
    </div>
</div>

今、私は問題を抱えています:単一行の列は、2 番目の列の両方の行にまたがっていません。1 行目と同じ高さで、その下に 2 行目と同じ高さの空白があります。

このセルを両方の行に広げるにはどうすればよいですか?

4

2 に答える 2

1

テーブル/行の概念を使用して div コンテナーに適用するという、これについて間違った方法で考えていると思います。彼らは本当にそのようには機能しません。

CSSでこれを行うことができます。

float:left; を追加します。すべての div コンテナまたはクラスに。

「列 2」に必要なスタイルを追加margin-left:100px;します。これにより、最初の列からそれらが押し出されます。

左の列の div に追加height:100px;して、固定の高さを与えます。

このようにすべてをダイヤルできます。

また、グループ全体をラップしているため、クラス 'row' を間違って使用している可能性がありますが、2 番目の行に適用されるクラスでもあります。これらの異なるものを作りたいと思うかもしれません。

于 2013-02-22T09:23:06.463 に答える
0

これはあなたが望むように機能すると思います：

<div style="background-color: #FF0000">
  First column with single row goes here
</div>
<div style="background-color: #00FF00; width:50%; float:left;"> 
  First row of second column goes here
</div>
<div style="background-color: #0000FF; width:50%; float:left;">
  Second row of second column goes here
</div>

CSS クラスにどのコードがあるのか​​ わからないので、回答でそれらを削除しました。機能させるには、そのコードを変更する必要がある場合があります。

列の幅を 50% に設定しました。他の幅が必要な場合は、これらの値を変更します。合計が100であることを確認してください。

また、不要と思われる HTML コードをいくつか削除しました。少なくとも私があなたの質問を理解している限り。

于 2013-02-22T09:33:25.040 に答える