外側のdivに2つの要素が並んでいて、左側に1つ、右側に1つある

多くの同様の質問がありましたが、わかりませんでした。外側のdivに2つの要素が並んでいて、左側に1つ、右側に1つある

私は次のdiv持っている：私はdiv要素の左側にある "inputHeaderTitle"、右側に "inputHeaderEdit" -spanをしたい

#inputHeader { 
 
    width: 100%; 
 
    background: #30273a; 
 
    border-radius: 10px 10px 0px 0px; 
 
} 
 
#inputHeaderTitle { 
 
    color: white; 
 
    margin-left: 10px; 
 
    display: inline-block; 
 
} 
 
#inputHeaderEdit { 
 
    color: white; 
 
    display: inline-block; 
 
}

<div id="inputHeader"> 
 
    <p id="inputHeaderTitle">Header</p> 
 
    <span id="inputHeaderEdit" class="glyphicon glyphicon-pencil"></span> 
 
</div>

を。これどうやってするの？

編集：

ここではjsfiddleです：私は浮いたhttps://jsfiddle.net/9nuhay76/1：左/右。しかし、私がそうするならば、外側のDIVは0pxの高さになります。どうして？

出典

2016-03-23 progNewbie

フロート1つの左及びその他の権利？ – j08691

フロートは、インラインブロックで適切な場所に配置するために使用すべきではありません。 – DCdaz

#inputHeader { 
 
    width: 100%; 
 
    background: #30273a; 
 
    border-radius: 10px 10px 0px 0px; 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 0 10px; 
 
    box-sizing: border-box; 
 
} 
 
#inputHeaderTitle { 
 
    color: white; 
 
    display: inline-block; 
 
    flex: 1; 
 
} 
 
#inputHeaderEdit { 
 
    color: white; 
 
    display: inline-block; 
 
}

<div id="inputHeader"> 
 
    <p id="inputHeaderTitle">Header</p> 
 
    <span id="inputHeaderEdit" class="glyphicon glyphicon-pencil">Edit</span> 
 
</div>

出典

2016-03-23 13:16:27

@progNewbieこれは動作しますが、これはIEでは実際にサポートされていないことを覚えておく必要があります。 – DCdaz

@DCdaz、flexboxはIE10以降で動作します。適切なプレフィックスが必要...プレフィックスは[https://autoprefixer.github.io/](https://autoprefixer.github.io/） –

から得ることができます。ベンダープレフィックスの有無にかかわらず、バグが多数存在します。最近のバージョンのIEのベンダープレフィックスが必要であるという事実は、あらゆる種類の警告音を鳴らすはずです。 – DCdaz

<div id="inputHeader"> 
<p id="inputHeaderTitle" style="float:left">Header</p> 
<span id="inputHeaderEdit" style="float:right" class="glyphicon glyphicon- pencil"></span> 
</div>

このような意味ですか？

出典

2016-03-23 13:07:39

あなたはフロートを追加することができます。このように、右：

jsbin

出典

2016-03-23 13:14:00 ShacharW

は、まずあなたが位置決めのためにfloatを使うべきではありません。ディスプレイのインラインブロックで適切な場所にいます。

代わりに表示表を使用し、次にテキストの配置を使用して、左または右に配置してみてください。

#inputHeader { 
 
    width: 100%; 
 
    background: #30273a; 
 
    border-radius: 10px 10px 0px 0px; 
 
} 
 
#inputHeaderTitle { 
 
    color: white; 
 
    margin-left: 10px; 
 
    display: inline-block; 
 
} 
 
#inputHeaderEdit { 
 
    color: white; 
 
    display: inline-block; 
 
} 
 

 
/* NEW */ 
 

 
.align-table { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
.t-align { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    width: 100%; 
 
} 
 
.align-center { 
 
    text-align: center; 
 
} 
 
.align-left { 
 
    text-align: left; 
 
} 
 
.align-right { 
 
    text-align: right; 
 
}

<div id="inputHeader" class="align-table"> 
 
    <div class="t-align"> 
 
    <p id="inputHeaderTitle">Header</p> 
 
    </div> 
 
    <div class="t-align align-right"> 
 
    <span id="inputHeaderEdit" class="glyphicon glyphicon-pencil"></span> 
 
    </div> 
 
</div>

出典

2016-03-23 13:17:27 DCdaz

外側のdivに2つの要素が並んでいて、左側に1つ、右側に1つある

答えて

関連する問題