3

CSS を使用して次のレイアウトを実現する方法がわかりません (おそらく、実際に CSS を知らないためです)。

私はこのようなdivの束を持っています:

<div class="right"> <p>1</p> </div>
<div class="left">  <p>2</p> </div>
<div class="left">  <p>3</p> </div>
<div class="left">  <p>4</p> </div>
<div class="right"> <p>5</p> </div>
<div class="right"> <p>6</p> </div>

(本当の内容ではありません)

ここで、レイアウトを div の 2 つの等しい列のように見せたいと思います。「右」のものは右に、「左」のものは左にあるため、次のようになります。

2 1
3 5
4 6

[編集:この質問の以前のバージョンでは、div 内にテキストエリアがあり、div はすべて「one」や「xyz」などの異なる名前でした。】のようなものを試してみました

div.right { width:50%; float:right; clear:right; }
div.left { width:50%; float:left; clear:left;}

しかし、それはうまくいきません: 次のようなものを生成します:

2 1
3 
4 5
  6

（「クリア」なしでは、軽快に生成されます

2 1
3 4
6 5

これは望んでいるものではありません）。

div の順序が異なる場合に動作させることができることは明らかですが、私はそうしたくありません (ブラウザーに Javascript がある場合、これらの div は動的に生成され、実際の順序を変更したくないため)。セマンティック上の理由から、Javascript がない場合に表示されます)。私が望むレイアウトを実現することはまだ可能ですか?

[価値のあるものとして、IE や他のブラウザーの古いバージョンでは動作しないようにしたいので、標準に準拠したブラウザーでのみ動作するソリューションがあれば、それで問題ありません :-)]

4

11 に答える 11

3

Firefox 3 では、次のように動作します。

div {
  width: 198px;
  border: 1px solid black;
}
div.onediv, div.tendiv, div.xyzdiv { float: right; }
div.twodiv, div.abcdiv, div.pqrdiv { float: left; }
<div style="width: 400px;">
  <div class="onediv"><p>One name</p> <textarea id="one"></textarea></div>
  <div class="twodiv"><p>Two name</p> <textarea id="two"></textarea></div>
  <div class="tendiv"><p>Ten name</p> <textarea id="ten"></textarea></div>
  <div class="abcdiv"><p>Abc name</p> <textarea id="abc"></textarea></div>
  <div class="xyzdiv"><p>Xyz name</p> <textarea id="xyz"></textarea></div>
  <div class="pqrdiv"><p>Pqr name</p> <textarea id="pqr"></textarea></div>
</div>

簡単なメモ:divクラス名 (つまり、abcdiv) を入れるのは少し冗長で奇妙です。適切なクラスの使用法について大々的に非難することなく、私はそれを省きます。

「col1」と「col2」と言うだけで、実際にコードを簡素化できます。そうすれば、必要に応じて後で列を交換することもできます。

div {
  width: 198px;
  border: 1px solid black;
}
div.col1 { float: right; }
div.col2 { float: left; }
<div style="width: 400px;">
  <div class="col1"><p>One name</p> <textarea id="one"></textarea></div>
  <div class="col2"><p>Two name</p> <textarea id="two"></textarea></div>
  <div class="col1"><p>Ten name</p> <textarea id="ten"></textarea></div>
  <div class="col2"><p>Abc name</p> <textarea id="abc"></textarea></div>
  <div class="col1"><p>Xyz name</p> <textarea id="xyz"></textarea></div>
  <div class="col2"><p>Pqr name</p> <textarea id="pqr"></textarea></div>
</div>

于 2008-12-13T16:38:26.573 に答える
2

解決策1

HTMLを複製する余裕がある場合：

.left-column .right, .right-column .left {
    display: none;
}

解決策2

ブラウザがCSS3をサポートするまで少し待ちます：

.right {
    position: flow(side); 
}

解決策3

divの高さが同じである場合は、間接的に隣接する兄弟コンビネータを使用します。CSSレベル3に属していますが、すでに十分にサポートされています。

.container {
    position: relative;
}

.left, .right {
    position: absolute;
    top : 0;
    width: 50%;
} 

.left {
    left: 0;
}

.right {
    left: 50%;
}

.left ~ .left, .right ~ .right {
    top : 100px;
}

.left ~ .left ~ .left, .right ~ .right ~ .right {
    top : 200px;
}

.left ~ .left ~ .left ~ .left, .right ~ .right ~ .right ~ .right {
    top : 300px;
}

... /* you need to include as many rules as the maximum possible height */
于 2009-06-10T18:24:31.417 に答える
2

入力ストリームを 2 つの独立したストリームに分離しようとしていますが、CSS ではそれができないと思います。左右のフロートを使用するのは賢明なアイデアですが、常にうまくいくとは限りません。CSS 仕様は、9.5.1 ルール 5 で次のように述べています。

フローティング ボックスの外側の上部は、ソース ドキュメントの前の要素によって生成されたブロックまたはフローティング ボックスの外側の上部よりも高くすることはできません。

そのため、フロートは左、右、および下にジャンプできますが、上にはジャンプできません。

絶対配置ですべてを達成できますが、それについて自動的なものは何もありません。

編集: コンテンツとレイアウトの分離に違反しているため、CSS3 がそのような機能をサポートするとは思わないとコメントで述べました。後で、 CSS3 が footnotes を持つ予定であることを思い出しました。そのため、div の一部を "float: note" でマークすると、選択した div がページの別の "footnote" 領域に流れます。残りのレイアウトの右側に配置できると思います。

于 2008-12-13T16:38:09.833 に答える
2

他の誰かが私の最初の考えが何であったかを見ることができるように、この回答の残りの部分をそのままにしておきますが、このアプローチは実際には失敗し、浮動要素が常に存在しないよりも多く存在する必要があります。

これがあなたの解決策だと思います（テストされていません）。

.left { width: 51%; float: left; }
.right { width: 49%; }

51% は、それらが隣り合って浮くのを防ぎ、すべての .right コンテンツがそれらの浮いたブロックを包み込むようにします。

あまり考えないほうが、HTML/css でより多くのことが得られます。繰り返しになりますが、レイアウトにテーブルを使用することはありません。

===[編集]===

これについてテストを実行しましたが、いくつかの微調整で機能し、最初のアイテムが左に浮いていることがわかっている場合 (または動作を逆にするために右に浮いている場合)。

<style>
  div div { text-align: center; padding: 20px 0; overflow: hidden; }
  .left { width: 251px; float: left; background: red; }
  .right { width: 249px; background: green; }
</style>
<div style="width: 500px;" >
  <div class="left"> <p>1</p> </div>
  <div class="right">  <p>2</p> </div>
  <div class="left">  <p>3</p> </div>
  <div class="left">  <p>4</p> </div>
  <div class="right"> <p>5</p> </div>
  <div class="right"> <p>6</p> </div>
</div>
于 2008-12-15T22:52:05.177 に答える
1

あなたはJavascriptを持っています - なぜそれを使わないのですか?

あなたはこう言いました：

ブラウザに Javascript がある場合、これらの div は動的に生成されます。セマンティック上の理由から、Javascript がない場合に表示される実際の順序を変更したくありません...

<div>ユーザーが Javascript を使用している場合にのみ、これらの s を表示しています。Javascript を使用して再配置しないのはなぜですか? #4 を #5 の後に移動すると、現在の CSS で問題なく表示されます。

だから（jQueryを使って）：

$("div:eq(3)").remove().insertAfter("div:eq(4)");
于 2008-12-15T20:46:39.860 に答える
1

そのような問題にぶつかったとき、私はたいていテーブルを使います。

<table>
    <tr>
        <td>
            <p>One name</p> <textarea id="one"></textarea>
        </td>
       <td>
            <p>XYZ name</p> <textarea id="xyz"></textarea>
        </td>
    </tr>
   ....
 </table>

配置は、すべてのブラウザーで完全に機能します。

于 2008-12-13T17:29:12.567 に答える
0

クリアを削除すると、正常に動作します。なんらかの理由で途中で重複しているように見えます (丸めエラー?)。

于 2008-12-13T16:28:00.323 に答える
0

960 グリッド システムをチェックしてください。過去にこれをプロジェクトで使用したことがありますが、かなりうまく機能していると言わざるを得ません。それだけでなく、使いやすく、ブラウザー間で一貫性があります:D

このフレームワークの使用:

<html>
    <head>
        <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
        <link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
     </head>
     <body>
     <div class="container_16">
         <div class="grid_1 alpha" style="text-align:center;">
            2
         </div>
         <div class="grid_1 omega" style="text-align:center;">
            1
         </div>
         <div class="clear"></div>
         <div class="grid_1 alpha" style="text-align:center;">
            4
         </div>
         <div class="grid_1 omega" style="text-align:center;">
            3
         </div>
         <div class="clear"></div>
         <div class="grid_1 alpha" style="text-align:center;">
            5
         </div>
         <div class="grid_1 omega" style="text-align:center;">
            4
         </div>
    </div>
</body>
</html>

代替テキスト http://img40.imageshack.us/img40/6889/cd3cc920a04b80e06b8efef.png

テキストの上にあるバーは、CSS やレイアウトの一部ではなく、ブラウザーからのものです。

于 2009-06-10T18:31:54.257 に答える
0

テーブルは、この私見にとって完全に受け入れられるソリューションです。

テーブルに対する反発は、サイトのレイアウト全体にテーブルを使用することに向けられました。しかし、データを行と列で表示する必要がある場合......それがテーブルの目的です:)

実行可能なクロス ブラウザー CSS ソリューションにまだ興味がある場合は、フレームワークの使用を検討します。ページを正しく表示するための時間を節約できます。

http://www.blueprintcss.org/は優れたフレームワークです。

于 2008-12-13T17:38:20.503 に答える
0

おそらく、絶対配置で行くことができますか？もちろん、ページの残りの構造に依存しますが、多くの場合、これは非常に実行可能です。

于 2008-12-13T22:27:31.373 に答える