19

これまでに見つけた最良の解決策は次のとおりです。

http://jsfiddle.net/kizu/UUzE9/

しかし、それだけではありませんでした。ご覧のとおり、3 つの列があります。そのうちの 2 つは、明示的なサイズ設定を避ける必要があります。2 番目のものはサイズを調整する必要があります。しかし、完全ではありません。

私が満たそうとしてきた条件を確立することによって明確にすることができます.

  • 3 つの列はすべて固定の高さで、正確には 65px です。
  • 最初の列の幅は 285px に設定されています。
  • 中央の列にはサイズが定義されていません。残っているスペースを占有するだけです。
  • 右側の列は、そこにあるコンテンツに合わせてサイズが変更されます。明示的に設定されたサイズはありません。コンテンツに基づいてサイズが変更されるだけで、中央の列が残りのスペースを占めるようになります。
  • 各列の上、下、および間に空白はありません。

最終結果は、おおよそ次のようになります。

   ロゴ | プレーヤー | 名前     
-------------------------------------------------- ---

テーブルの場合は、次のようにするだけです。

<table width="100%" height="65px" cellspacing=0 cellpadding=0>
    <tr>
        <td width="285px" height="65px">
            Logo
        </td>
        <td height="65px">
            Player
        </td>
        <td width="1px" height="65px">
            Account
        </td>
    </tr>
</table>

上記の表コードの結果: http://jsfiddle.net/zMNYb/

しかし、私はテーブルの使用と DIV ベースのレイアウトの使用から離れようとしています。何か案は？

4

4 に答える 4

28

これを行うにはfloat:left、最初の列、float:right最後の列に使用し、中央の列を作成しますfloat:none

更新されたデモ: http://jsfiddle.net/L85rp/3/

HTML

<div class="col1">Column1</div>
<div class="col3">Column3</div>
<div class="col2">Column2</div>

CSS

.col1 {
    background-color: #ddf;
    float: left;
}
.col2 {
    background-color: #dfd;
    float: none;
}
.col3 {
    background-color: #fdd;
    float: right;
}

注: HTML では中央の列の前に右の列を配置する必要があります (上記を参照してください。HTML では col3 は HTML の col2 の前にあります)。ブラウザーが中央の列をレンダリングするときに、既存のフローティングの周囲に正しくレンダリングする方法を認識していることを確認します。要素。

更新された CSS

.col1 {
    background-color: #ddf;
    float: left;
    width: 285px;
    height: 65px;
}
.col2 {
    background-color: green;
    float: none;
    height: 65px;
    overflow: hidden;
    display: table-cell; /* turn this off to lock height at 65px */
}
.col3 {
    background-color: cyan;
    float: right;
    height: 65px;
}

更新されたデモ: http://jsfiddle.net/ew65G/1/

于 2012-07-09T06:58:49.930 に答える
0 
<div style="float:left; width:33%">Column1</div>
<div style="float:left; width:33%">Column2</div>
<div style="float:right; width:33%">Column3</div>

必要に応じて幅 % を調整できます。

于 2014-10-30T14:11:11.833 に答える
0

これは、ネストされた div コンセプトによっても達成できます。次のように、必要な div セクションを 3 列に分割するだけです。

<div id="main">
    <div id="column-1"></div>
    <div id="column-2">
        <div id="column-2-1"></div>
        <div id="column-2-2"></div>
    </div>
</div>

詳細については、css div を使用して 3 列のレイアウトを作成する方法を参照してください。

于 2013-12-22T20:54:29.227 に答える