web-dev-qa-db-ja.com

CSSの1行に2 div幅50％、ファイルに改行あり

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

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

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

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

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

追伸英語でごめんなさい。追記私は自分の問題をうまく説明したいと思います

cssinline
48
Chris

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

デモ： http://jsfiddle.net/N9mzE/1/

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

問題は、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も使用します

30
Ana

これにparent DIV font-size：を指定します。このように書く：

<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>
22
sandeep

次のCSSでdivの周りにそれらをラップします

.div_wrapper{
    white-space: nowrap;
}
21
Tihomir Mitkov

絶対位置とフロートを使用せずに、そのようなことを行うにはどうすればよいですか？

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）Flexbox=（- [〜＃〜] fiddle [〜＃〜] ）

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

参考として、 this CSS-tricks post は、これを達成するためのさまざまなアプローチを要約しているようです。

12
Danield
<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/ in IE 7（私がサポートしている最も古いブラウザ仕事）。divは隣り合わせではありません。

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

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

1
OptimusCrime

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

<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>
0
S.831

申し訳ありませんが、ここで私が見るすべての答えは、ハックするか、少しくしゃみをすると失敗します。

テーブルを使用する場合は、（必要に応じて）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/

0
Rui Marques