コンテンツが大きすぎる場合、Divsはフローティングではありません

Question

私は2つのdivを並べて取得しようとしています。左の画像には画像があり、右の画像にはデータがあります。十分な部屋がないときは、右のものを切り捨ててください。残念ながら、切り捨てではなく、十分な余裕がない場合は、左にあるdivの下に全体のdivがドロップダウンされます。下の写真はこれを明確にすべきです。

ここに私のhtmlです。私はどこにでもoverflow:hidden; white-space: nowrap;を投げています。無駄です。右のdivのコンテンツが大きすぎない場合（またはポップアップのサイズを十分に大きくすると）、すべてのものが浮かびます。

（それは、私が楽しげにRavor構文を使用しているだろうされた場合、これは、MVCではありません）

<div id="tabInfo" class="tabDiv"> 
     <ul> 
      <li><a href="#tabs-info">Book Info</a></li> 
      <li><a href="#tabs-reviews">Reviews</a></li> 
      <li><a href="#tabs-subjects">Related Subjects</a></li> 
     </ul> 
     <div id="tabs-info"> 
      <div style="float:left;"> 
       <img src="../books/covers/medium/<%= Book.medImgID %>.jpg" /> 
      </div> 
      <div style="float:left; margin-left:10px; font-size:10pt; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;"> 
       <div style="font-size:14pt; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;"> 
        <b><%= Book.Title %></b> 
       </div> 
       <div title='<%= PublisherDisplay %>' style='margin-top:5px; font-size:12pt'><%= PublisherDisplay %></div> 

       <div style="margin-top:7px;">Author<%= Book.AuthorsArray.Length == 1 ? "" : "s" %></div> 
        <% foreach (string auth in Book.AuthorsArray) { %> 
         <div style="margin-left:10px;"><%= auth %></div> 
        <% } %> 

       <div title='<%= Book.Pages ?? 0 %>' Pages' style='margin-top:6px;'><%= Book.Pages ?? 0 %> Pages</div> 
       <div style="margin-top:5px; height:16px; margin-top:6px;"> 
        <div style="vertical-align: middle; float: left;">Read?&nbsp;&nbsp;</div> 
        <img src='../Img/IsRead/<%= Book.IsRead ? "check" : "cross" %>.png' style='width: 16px; height: 16px;' /> 
       </div> 
      </div> 
     </div> 

Answer 1

それははず仕事あなただけmax-widthプロパティを設定している場合divには、設定された幅を超えることはできません。

---

コードを変更するには、このコードを変更する必要があります。これは一例です:)

div.left 
{ 
    float: left; 
    width: 100px; 
} 

div.right 
{ 
    margin-left: 110px; 
} 

div 
{ 
    border: 1px solid red; 
} 

Answer 2

私は左と右の両方の列の固定幅を設定することをお勧めしますか、タブ領域に十分なスペースを持っていないので、右の列の意志は、左の1のダウンします。したがって、タブの内容領域も幅の値に設定する必要があります。あなたは空白とテキストのオーバーフローを設定する必要がいけない

は、あなたが実際にカミソリの構文を使用してMVCを使用する必要はありません

http://jsbin.com/uvibiz