60

パーセンテージを幅として使用して流動的なレイアウトを構築しようとしています。私はこれを試しました：

<div style="width:50%; display:inline-table;">A</div>
<div style="width:50%; display:inline-table;">B</div>

その場合、それらは一行に並ぶことはありませんが、次のようにそれらの間の改行を削除すると:

    <div style="width:50%; display:inline-table;">A</div><div style="width:50%;   display:inline-table;">B</div>

その後、正常に動作します。問題はどこだ？絶対位置とフロートを使用せずに、どうすればそのようなことを行うことができますか。

ps英語でごめんなさい。PSS私は私の問題をうまく説明してくれることを願っています

4

10 に答える 10

84

問題は、何かがインラインである場合、すべての空白が実際のスペースとして扱われることです。したがって、要素の幅に影響します。floatまたはを使用することをお勧めしdisplay: inline-blockます。（divの間に空白を残さないでください）。

これがデモです：

div {
  background: red;
}
div + div {
  background: green;
}
<div style="width:50%; display:inline-block;">A</div><div style="width:50%; display:inline-block;">B</div>

于 2012-05-22T08:55:02.400 に答える
33

問題は、HTML でそれらの間に新しい行がある場合、inline-tableまたはを使用するとそれらの間にスペースができることです。inline-block

50% + 50% + そのスペース > 100% なので、2 番目のスペースは最初のスペースよりも下になります。

ソリューション:

<div></div><div></div>

また

<div>
</div><div>
</div>

また

<div></div><!--
--><div></div>

HTML の最初の終了 div タグと 2 番目の開始 div タグの間にスペースを入れないようにします。

PS -これinline-blockの代わりに使用することもできますinline-table

于 2012-05-22T09:06:33.967 に答える
28

次の CSS を使用して、それらを div で囲みます。

.div_wrapper{
    white-space: nowrap;
}
于 2015-03-19T09:02:00.147 に答える
22

このparentDIVに font-size:0 を指定します。次のように書きます。

<div style="font-size:0">
  <div style="width:50%; display:inline-table;font-size:15px">A</div>
  <div style="width:50%; display:inline-table;font-size:15px">B</div>
</div>
于 2012-05-22T09:13:46.650 に答える
17

絶対位置とフロートを使用せずに、どうすればそのようなことができますか?

inline-block（他の回答で述べたように）アプローチを使用する以外に、いくつかの他のアプローチがあります：

1) CSS テーブル ( FIDDLE )

.container {
  display: table;
  width: 100%;
}
.container div {
  display: table-cell;
}
<div class="container">
  <div>A</div>
  <div>B</div>
</div>

2) フレックスボックス (フィドル)

.container {
  display: flex;
}
.container div {
  flex: 1;
}
<div class="container">
  <div>A</div>
  <div>B</div>
</div>

参考までに、この CSS トリックの投稿は、これを達成するためのさまざまなアプローチをまとめているようです。

于 2015-03-19T10:15:09.893 に答える
1 
<div id="wrapper" style="width: 400px">
    <div id="left" style="float: left; width: 200px;">Left</div>
    <div id="right" style="float: right; width: 200px;">Left</div>
    <div style="clear: both;"></div>
</div>

この質問がインライン ブロックを必要としていることは知っていますが、http://jsfiddle.net/N9mzE/1/を IE 7 (私が働いている場所でサポートされている最も古いブラウザー) で表示してみてください。divは横に並んでいません。

OPは、フロートが好きではなかったので、フロートを使いたくないと言った。ええと...私の意見では、どのブラウザーでも奇妙に見えない優れた Web ページを作成することが主な目標であり、フロートを使用してこれを行います。

正直なところ、私は問題を見ることができます。フロートは素晴らしいです。

于 2012-05-22T09:13:18.787 に答える
0

申し訳ありませんが、ここに表示されているすべての回答はハックであるか、くしゃみを少し強くすると失敗します。

テーブルを使用する場合は、(必要に応じて) div 間にスペースを追加したり、境界線を設定したり、パディングを設定したりできます...

<table width="100%" cellspacing="0">
    <tr>
        <td style="width:50%;">A</td>
        <td style="width:50%;">B</td>            
    </tr>
</table>

ここでより完全な例を確認してください: http://jsfiddle.net/qPduw/5/

于 2014-01-02T12:37:17.910 に答える
0

基本的にinline-tableは要素テーブル用です。ここで本当に必要なのは だと思います。とにかくinline-block使用する必要がある場合は、次のように試してください。inline-table

<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>
于 2012-05-22T08:59:21.353 に答える
-1

幅を 50% に設定するときに発生する問題は、サブピクセルの丸めです。コンテナーの幅が 99 ピクセルの場合、幅を 50% にすると、それぞれ 50 ピクセルのコンテナーが 2 つになる可能性があります。

float を使用するのがおそらく最も簡単で、それほど悪い考えではありません。問題を解決する方法の詳細については、この質問を参照してください。

float を使用したくない場合は、49% の幅を使用してみてください。私の知る限り、これはクロスブラウザーで動作しますが、ピクセルパーフェクトではありません..

html:

<div id="a">A</div>
<div id="b">B</div>

CSS:

#a, #b {
    width: 49%;
    display: inline-block; 
}
#a {background-color: red;}
#b {background-color: blue;}
于 2012-05-22T09:04:25.487 に答える