0

HTMLを規律するために少し助けが必要です。動いているようです。

とにかく、私が取り組んでいるページのコンテンツ領域には2つの列があります。複数列の外観を得るには、列の「行」の一部を並べる必要があるため、各列にdivを含むものは使用していません。

したがって、代わりに、基本的に、行ごとに2つのインラインdivを持つ複数の「行」を使用しています。1つは左のコンテンツ用、もう1つは右のコンテンツ用です。それらのほとんどは正しく機能しています。しかし、何らかの理由で、私の最後の行は正しく機能していません。何があっても、幅を与えると聞き取れません。

関連するHTMLは次のようになります。

<div id="mainContainer">
    <div id="topBar"></div>  //full width
    <div id="featured">                        //this "row" is working fine
        <div id="featuredVideos"></div>            //these two
        <div id="featuredLiterature"></div>        //are inline
    </div>
    <div id="browseButtons">                   //this is the "row" that is acting up
        <div id="litBrowse"></div>                 //these two
        <div id="vidBrowse"></div>                 //are inline
    </div>
</div>

それまでの間、どのような状況でdivが幅をリッスンしない可能性がありますか？私は、すべての子のdivを内側litbrowseにvidbrowse1、同じ幅、450ピクセル、サイコロなしで指定することさえしました。その上のすべてのコンテンツは、本質的にまったく同じ構造であり、正常に機能しています。唯一の違いは、おそらく、問題の行の上の「行」が2つのフローティングdivで構成されていることです。

これが問題を示すjsfiddleです。下の2つのdiv（カテゴリごとにライトを参照、カテゴリごとにビデオを参照）は間隔を空ける必要がありますが、450ピクセルの幅をとらないため、一緒に縮んでいます。

4

3 に答える 3

3

問題は、あなたがそれを言っているということ.browseBtnですinline。インライン要素は幅を取りません。ブロックレベルの要素のみが取ります。

代わりに使用inline-blockすると、必要な処理が実行されます。divを並べて作成し、幅を指定できるようにブロックするのに十分なインラインです。

http://jsfiddle.net/abtFr/2/を参照してください

于 2012-10-11T16:01:30.600 に答える
2

2番目の編集-他の人は、display：inlineの代わりにdisplay ：inline-blockを使用するように応答しました。 インラインブロックはIE7と互換性がありません。ただし、追加することで互換性を持たせることができます

zoom:1;
*display: inline;

インラインブロックを使用して要素に。IE6と互換性を持たせるには、高さを指定する必要があるため、

_height: [yourheight]px;

アンダースコアはIE6のみを対象とします。

または、要素を左にフロートさせることもできます。その場合、元の返信が適切である可能性があります。

編集-私はjsFiddleを見ずに応答しました。この応答はおそらくほとんど無視できます。

あなたの質問に答えるために、要素をフローティングすると、通常のレイアウトから外れます。divが別のdiv内に左に浮いている場合、そのコンテナーの左端に配置されますが、そのコンテナーdivのサイズを決定するときにその寸法は考慮されません。つまり、そのコンテナは、内部にdivがないように動作します。

これを修正するには、コンテナ内のフローティングdivの後に別の（空の）divを配置し、配置時にフローティングdivが考慮されるように、スタイル「clear：both」を割り当てる必要があります。次に、コンテナdivは、最後にクリアされたdivを確認し、それを考慮してサイズを変更します。

または、コンテナ内にクリアされたdivを追加することをスキップして、コンテナ自体にスタイル「overflow：hidden」を追加することもできます。これはややハックですが、ハックに関してはかなり堅牢なものです。

これで問題が解決することを願っています。そうでない場合は、詳細情報を待つ必要があります。

于 2012-10-11T16:02:09.137 に答える
1

それは簡単です、はい、あなたはを持ってdivいます、しかしあなたはそれdisplayをinline（.browseBtn定義で）として定義します。したがって、それはもはやブロック要素widthではなく、定義をリッスンしません。

他の副作用があるかもしれませんが、私はフィドルを修正しました。

于 2012-10-11T16:02:58.640 に答える