web-dev-qa-db-ja.com

フロートなしの横並びのDiv

Divの「左」と「右」を列のように並べて並べるにはどうすればよいですか？

私はそれらにfloat：leftを使用できることを知っていますが、それはうまくいきます...しかし、ここのステップ5と6では http://www.barelyfitz.com/screencast...s/positioning/ 男はそれが可能であると言いますが、私はそれを動作させることはできません...

コード：

<style>
div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}
</style>

<div class="container">
        <div class="left">
            LEFT
        </div>
        <div class="right">
            RIGHT
        </div>
</div>
csshtmlcss-float
62
Praneel PIDIKITI

floatsを使用しない場合の通常の方法は、display: inline-block： http://www.jsfiddle.net/zygnz/1/

.container div {
  display: inline-block;
}

ただし、最初のブロックの後に追加のスペースがあります。これは、2つのブロックがinlineやaのような本質的にem要素であるためです。 2つのカウントの間。これにより、レイアウトが崩れたり、見栄えが悪くなったりする可能性があります。このため、文字間の空白をすべて削除しないことをお勧めします。

また、ほとんどの場合、フロートはより柔軟です。

102
Yi Jiang

divは ブロックレベル要素 であり、ブロックとして動作することを意味し、ブロックはフロートされずに並んでいることができません。ただし、次のようにして インライン要素 に設定できます。

display:inline-block;

試してみる...

別の方法は、次を使用して配置することです。

position:absolute;
left:0;

および/または

position:absolute;
right:0;

注：これが期待どおりに機能するには、ラッパー要素にposition:relative;これにより、絶対配置の要素は、ラッパー要素に対して相対的なままになります。

18
Zuul

また、CSS3 flexboxレイアウトを使用することもできます。これは、最近では 十分にサポートされています です。

.container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    background:black;
    height:400px;
    width:450px;
}

.left {
    flex: 0 0 300px;
    background:blue;
    height:200px;
}

.right {
    flex: 0 1 100px;
    background:green;
    height:300px;
}

例を参照 （互換性を最大限にするためのレガシースタイルを使用）＆ 詳細 flexboxについて。

2
Oriol

私は現在これに取り組んでおり、すでに多くのソリューションを持っています。高品質のサイトを持っていることは素晴らしいことです。それは私の利便性のためにも使用できます。これらのことを書き留めないと、最終的に一部を忘れてしまうからです。また、何らかの新しいプログラミング/設計を開始する場合は、基本事項を書き留めておくことをお勧めします。

したがって、フロート関数が問題を引き起こしている場合、いくつかのオプションを試すことができます。

1つは、divタグのdivアライメントを変更することです。<div class="kosher" align=left>これがあなたに合わない場合、そのようなマージンを持つ別のオプションがあります。

.leftdiv {
    display: inline-block;
    width: 40%;
    float: left;
}
.rightdiv {
    display: block;
    margin-right: 20px;
    margin-left: 45%;
}

<div align=left>を削除することを忘れないでください。

2
Peter Gruppelaar

つかいます display:table-cell; .Leftと.Rightの間のスペースを削除するため

div.left {
    background:blue;
    height:200px;
    width:300px;
}

div.right{
    background:green;
    height:300px;
    width:100px;
}

.container{
    background:black;
    height:400px;
    width:450px;
}

.container > div {
    display: table-cell;
}
<div class="container">
  <div>
    <div class="left">
      LEFT
    </div>
  </div>
  <div>
    <div class="right">
      RIGHT
    </div>
  </div>
</div>
2
Mehdi

あなたは右divのマージンで試すことができます

margin: -200px 0 0 350px;
1
giker