13

親の幅を超える 2 つのインライン div があります。したがって、2 番目の div は次の行にジャンプします: http://jsfiddle.net/uVqG6/2/

両方の div を同じ行に保持するにはどうすればよいですか?

overflow:hidden;div.a に追加すると、2 番目の div が非表示になります。

4

4 に答える 4

12

これを行うにはいくつかの方法があります。まず、display: inline-block;orfloat: left;を使用して、div を並べて配置できます。それらは異なる働きをするので、あなたのケースに適したものを使用してください。

第二に、含まれている div (a) が同じ行に両方の div を含むのに十分な大きさでない限り、どちらも機能しません。overflow: hidden;または、含まれている div (a) で使用できます。

編集：

あなたの例を更新しました：http://jsfiddle.net/uVqG6/11/

white-space: nowrap;内部の div がラッピングされていたため、 を使用する必要がありました。

これもあなたの質問に答える別の答えです: CSS: テキストが複数行を占めるのを止める方法は?

usingdisplay: inline-blockは基本的に要素をテキストとして扱うため、ほとんどのテキスト形式の css プロパティが適用されることに注意してください。

于 2012-12-26T18:54:59.407 に答える
9

これに使用できますposition: absolute;。それ以外の場合は、コンテナの div 幅を増やすか、それを作成する以外に方法はありませんnowrap

デモ

デモの使用z-index

CSS

.a {
    width: 100px;
    height: 50px;
    border: solid 1px #345;
    position: relative;
}

.b {
    width: 60px;    
    height: 50px;
    background-color: red;
}
.c {
    width: 50px;    
    height: 50px;
    background-color: green;
    position: absolute;
    right: 0;
    top: 0;
}
于 2012-12-26T18:55:11.643 に答える
8

インライン要素は、テキストとほぼ同じように動作します。それらが折り返されないようにしたい場合は、書式設定に使用した空白を削除するかwhite-space:nowrap;、 のルールに追加して.aください。

ここにデモンストレーションがあります：http://jsfiddle.net/bfkgT/

于 2012-12-26T18:54:46.830 に答える
6 
.a {
width: 100px;
height: 50px;
border: solid 1px #345;
white-space: nowrap;
overflow:hidden; }

これはあなたが望むことをしますか？

于 2012-12-26T18:53:13.023 に答える