1

何時間も検索してきましたが、2 つの div を隣り合わせに配置する方法が見つかりません。以下の例は、div が画面よりも小さい場合は正常に機能しますが、画面よりも大きい場合は互いに下にあります。また、2ページに同じクラスが必要です:

  • 両方とも画面に収まる1ページで、それらを並べて表示したい（左側と右側ではなく）
  • 他のページを合わせると、画面よりも大きくなります。（横スクロールは問題ありません）

次の例を見てください。

<style>
.wrapper
{
    border:1px solid Red;
    display: inline-block;
}

.left 
{
    float:left;
    color: Green;
    border:1px solid Green;
}

.right 
{
    float:right;
    color: Blue;
    border:1px solid Blue;
}
</style>
<div class="wrapper">
    <div class="left">
        ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
    </div>
    <div class="right">
        ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
    </div>
    <div class="clear" />
</div>

実際の設計では、ASDF は大きな に置き換えられ<table>ます。上で述べたように、私は何時間も検索してきましたが、解決策を見つけることができるので、これが以前に尋ねられた場合は申し訳ありません.

4

5 に答える 5

6

  1. 2 つを並べるのにラッパー div は必要ありませんが、他の理由 (境界線、背景など) でそれがある場合は、に設定する必要はありませんinline-block。

  2. 技術的にフローティングする必要はありません。inline-blockは同じ効果があり、より適切です。そうは言っても、物事を可能な限り流動的にするには、フロートが 1 つ必要です。これについては、すぐに説明します。

  3. これと、インライン ブロックを含む他の css マジックをトリッキーでエラーが発生しやすいものにしているのは、要素がインライン要素のように処理されたり、ブロックのように処理されたりすることです。これはクロスブラウザーの一貫性がありません。一般に、これは、ブロック レベルのスタイル設定 (ボーダーや幅など) とインライン レベルのスタイル設定を使用できることを意味します。一般に、人々はそれを「一列に」水平に落ちるブロックと考えています。ただし、font-size や white-space などのラッパー div のインライン要素プロパティも有効になります (これは面倒です)。

以上のことをすべて述べた上で、ブラウザ ウィンドウを超えてブロック レベルのラッパー内にあるブロック要素を並べて配置するための必要最小限のレシピを次に示します。

  1. 内側のブロックは に設定する必要がありますinline-block。
  2. 長いテキスト行をブラウザ ウィンドウを超えて水平方向に拡張する場合と同様に、外側のラッパーを にwhite-space設定する必要があります。nowrap
  3. float: left; clear: both;そうしないと、ラッパーの幅がウィンドウの幅を超えないため、外側のラッパーを に設定する必要があります。別の方法として、ラッパーの幅を設定することもできますが、それがどこまで拡大するかわからない場合は、フロートによってラッパーがコンテンツの幅に合わせて自動的に縮小または拡大されます。は、フローティングが周囲の要素に影響を与えるのclear:bothを防ぎます。

したがって、次の HTML の場合:

<div class="wrapper">
    <div class="left">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
    <div class="right">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
</div>​

最低限必要な CSS は次のとおりです。

.wrapper {
         white-space: nowrap;
         float:left;
         clear: both;
}

.left, .right{
    display: inline-block;
}

そして、あなたの例では、次を追加します。

.wrapper {
         border: 1px solid red;
}

.left 
{
    color: Green;
    border:1px solid Green;

}

.right 
{
    color: Blue;
    border:1px solid Blue;
}​

デモ: http://jsfiddle.net/crazytonyi/jTknm/

于 2012-04-20T10:59:30.037 に答える
2

white-space: nowrapこれは、親.wrapper要素とdisplay: inline-block子要素.leftおよび.right要素を結合して使用できる1つのアプローチです。

.wrapper
{
    /* other stuff */
    white-space: nowrap;
}

.left 
{
    display: inline-block;
    /* other stuff */
}

.right 
{
    display: inline-block;
    /* other stuff */
}​

JSフィドルデモ。

于 2012-04-20T10:40:02.323 に答える
0

display: inline-block内側のdivをに設定し、外側のdivに次のように設定することで、フローティングせずにこれを行うことができますwhite-space: nowrap。

<div class="wrapper">
    <div class="left">left</div><div class="right">right</div>
</div>

.wrapper { border: 1px red solid; white-space: nowrap }
.wrapper div { display: inline-block; width: 70% } /* 2*70% = 140% of .wrapper */

実際の動作をご覧ください。

最初のdivを閉じてから2番目のdivを開くまでの間に空白を残さないように注意してください。空白は、レンダリングで表示されるスペースとして表示されます。

于 2012-04-20T10:40:23.460 に答える
0

float:leftええと、そもそも両方に使用する必要があります。次に、ラッパーを強制overflow:showするか、新しい CSS 3 プロパティを使用しますoverflow-x:scroll。それでもうまくいかない場合はお知らせください。

さて、私はあなたのためにテストしました。これが機能しない理由は、固定幅などを指定していないためです。作業コードは次のとおりです。

<style>
.wrapper
{
    border:1px solid Red;
    width:100%;
    overflow-x:scroll;
}

.left 
{
    float:left;
    width:500px;
    color: Green;
    border:1px solid Green;
}

.right 
{
    float:left;
    width:500px;
    color: Blue;
    border:1px solid Blue;
}
</style>
<body>
<div class="wrapper">
    <div class="left">
        ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
    </div>
    <div class="right">
        ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
    </div>
    <div class="clear" />
</div>

次に、幅を指定する場合は、Javascript を使用してページの読み込み時に幅を決定するか、CSS を使用します。

于 2012-04-20T10:37:27.743 に答える
0

あなたのdivには幅が必要です。試してみてください：

<div id="left"><p>Some content here...</p></div>
<div id="right"><p>Some content here...</p></div>

<style>
    #left, #right { float:left; color: Green; border:1px solid Green; width:49%; }
    #left { margin-right:1%; }
</style>
于 2012-04-20T11:01:37.347 に答える