1

テーブルの左側にラジオボタン（またはその他の要素）を配置したいのですが、ボタンを垂直方向の中央に配置します。テーブルがすべて同じサイズになることに気付いた場合は、相対的な配置を使用できます。しかし、私はこれを知りません。このjsfiddleは私が必要とするものに近いですが、左側のdivは同じ高さである必要があり（垂直方向の配置の場合）、マージンにも存在する必要があります。このjsfiddleは私が探しているものに近いですが、少しハッキーなようで、さまざまな高さのテーブルを使用できません。javascriptなしでHTML/CSSを使用してこれを達成できますか？

これを実現するために私が使用しているHTMLは次のとおりです。

<div class="item">
    <div class="one"><input type="radio" name="group"/></div>
    <div class="two">
    <table>
        <tr><td>Data</td><td>More Data</td></tr>
        <tr><td>another</td><td>row</td></tr>
        <tr><td>of ...</td><td>you guessed it</td></tr>
        <tr><td>just</td><td>more data</td></tr>
    </table>
    </div>
</div>

およびCSS：

table {border-collapse:collapse;width:100%;}
td {border:1px solid black;padding:10px;}
.item {margin:10px; padding:10px; background:red;}
.two {background:blue;}

/* customization */
.one {background:yellow;text-align:center;width:20px;display:table-cell;vertical-align:middle;}
.two {margin-left:20px;}

/* hacky */
.one {height:50px;position:relative;top:55px;}
.two {margin-top:-50px;}
4

1 に答える 1

1

垂直方向の整列は、テーブルセル内またはインライン要素間でのみ機能します。したがって、1行2セルのテーブルを使用するか、.oneCSS.twoを使用してdivをテーブルセルに変換します。

.one, .two {display:table-cell;}

デモ （Firefoxでのみテストされ、他のブラウザはインストールされていません。動作することを願っています）

于 2013-01-24T06:04:25.333 に答える