兄弟の幅が大きくなったときにdivを縮小するレスポンシブデザイン

Question

ヘッダーに2つの要素が含まれ、divが左に浮かび、ulが右に浮かぶウェブサイトでバグを修正しようとしています。

通常は、二人はお互いの隣に座って、時折ulの内容は、大規模であり、2つの接続としてdivがライン上にとどまるが、次の行にul滴。私はdivの幅を犠牲にし、2行にテキストを置くことでこれを防止したいと思います。

私がこれまでにやったことは、左の幅をpxで明示的にdivに設定することですが、必要なときだけすべての行が2行になります。私がディスプレイと最小/最大幅の周りに試したことのある他のすべてのものはそれほど大きな影響を受けていません。

私はここで完全なマークアップを投稿していないだろうが、それは、CSSもかなり複雑であるので、私はここには含まれませんが、全体の事を見つけることができるこの

<div id="minibasketAndLogin"> 
    <div id="login"><!--omitted--></div> 
    <ul class="basketLoginList"> 
     <li><!--there are 7 li's in this list--></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
</ul> 

のような少し何かを行きますthis fiddle。

基本的に、ulストレッチとして、divは縮小し、次の行にテキストを折り返します。

おかげ

Answer 1

私はこのようにそれを行うだろう - table-cellとして内部tableと二つの要素として、コンテナを設定されているので、彼らは常に隣同士に滞在します。リスト項目を1行に保持するには、ulにはwhite-space:nowrap;、liにはdisplay:inline-block;を設定します。

jsfiddle

#minibasketAndLogin { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
#login, .basketLoginList { 
 
    display: table-cell; 
 
} 
 
.basketLoginList { 
 
    white-space: nowrap; 
 
} 
 
.basketLoginList li { 
 
    display: inline-block; 
 
    border: 1px solid; 
 
}

<div id="minibasketAndLogin"> 
 
    <div id="login">Login as John Doe</div> 
 
    <ul class="basketLoginList"> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
     <li>4</li> 
 
     <li>5</li> 
 
     <li>6</li> 
 
     <li>7 bla bla bla bla bla bla bla bla bla bla</li> 
 
    </ul> 
 
</ul>