スパンまたはdivを水平に配置するにはどうすればよいですか？

私の唯一の問題は、それらを3つに並べ、等間隔にすることです。どうやら、スパンは幅を持つことができず、div（およびdisplay：blockのあるスパン）は横に並べて表示されません。提案？

<div style='width:30%; text-align:center; float:left; clear:both;'> 私が今持っているものです。

divをfloat: left;属性とともに使用して、横に並べて表示することができますが、重複しないように次の要素をクリアする必要がある場合があります。

使用できます

.floatybox {
     display: inline-block;
     width: 123px;
}

インラインブロックをサポートするブラウザのみをサポートする必要がある場合。インラインブロックは幅を持つことができますが、ボタン要素のようにインラインです。

ああ、あなたは垂直配置を追加したいと思うかもしれません：物事が整列することを確認するために要素の上に

私の答え：

<style>
 #whatever div {
  display: inline;
  margin: 0 1em 0 1em;
  width: 30%;
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

どうして？

技術的には、Spanはインライン要素ですが、幅を持つことができます。表示プロパティを設定して、最初にブロックする必要があります。ただし、このコンテキストでは、divをコンテンツで埋めたいと思うので、divがおそらくより適切です。

あなたが絶対にしたくないことの1つはclear:both、divに設定されていることです。このように設定すると、ブラウザは要素が同じ行に配置されることを許可しなくなります。その結果、要素が積み上げられます。

の使用に注意してくださいdisplay:inline。これはie6マージン倍増バグを扱います。条件付きスタイルシートなど、必要に応じて他の方法でこれに取り組むことができます。

これらはページ上の唯一の要素ではないので、他のページ要素から分離する必要があるので、ラッパー（#whatever）を追加しました。

とにかく、それがお役に立てば幸いです。

できるよ：

<div style="float: left;"></div>

または

<div style="display: inline;"></div>

どちらでも、divが水平に並べられます。

3つの均等なサイズの列、均等な間隔、および（均等な）スケールを提供するので、私はこのようにします。注：これはテストされていないため、古いブラウザでは微調整が必​​要になる場合があります。

<style>
html, body {
    margin: 0;
    padding: 0;
}

.content {
    float: left;
    width: 30%;
    border:none;
}

.rightcontent {
    float: right;
    width: 30%;
    border:none
}

.hspacer {
    width:5%;
    float:left;
}

.clear {
    clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>

私は使うだろう：

<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%; 
}
.sidebox { 
float: right;
width: 30%; 
}
<div class="all">
   <div class="maincontent">
       MainContent
   </div>
   <div class="sidebox"> 
       SideboxContent
   </div>
</div>

オーバーフローからこの 'コードツール'を使用するのは初めてです...

あなたがしたいのは、CSSグリッドベースのレイアウトを調べることです。このレイアウトメソッドには、ページのコンテンツをグリッド構造に揃えるためにいくつかのCSSクラスを指定することが含まれます。これは、Webベースよりも印刷面のレイアウトに密接に関連していますが、テーブルに頼ることなくコンテンツを構造にレイアウトするために多くのWebサイトで使用されている手法です。

Smashing Magazineの初心者にこれを試してみてください。

css Floatプロパティを見てください。 http://w3schools.com/css/pr_class_float.asp

それはdivのようなブロック要素で動作します。あるいは、何を表示しようとしているのか、実際に情報の表を表示しようとしても、表は悪ではありません。

私はそれらにすべてのdisplay: block;属性を与え、使用するようにしようと思いますfloat: left;。

その後、必要に応じて設定widthや設定を行うことができheightます。垂直方向の配置規則を指定することもできます。

    <!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>

別の...を使用するfloat: left;かright;、width他の値を変更してください...それはうまくいきます...また、divによって使用された10％のアレントがそれらの間で使われていないことに注意してください...悪い英語で申し訳ありません:)