콘텐츠가 너무 크면 Divs가 부유하지 않습니다.

두 개의 div를 나란히 놓으려고합니다. 왼쪽에는 이미지가 있고 오른쪽에는 이미지가 있습니다. 오른쪽 공간에 충분한 공간이 없을 때 잘라내기를 원합니다. 불행히도, 잘라 내기 대신에 전체 구역은 충분한 공간이 없을 때 왼쪽에있을 구역 아래로 떨어지고 있습니다. 아래 그림은이 사실을 명확히해야합니다.콘텐츠가 너무 크면 Divs가 부유하지 않습니다.

여기 내 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>

enter image description here

출처

2011-09-10 Adam Rackis

속성. jsfiddle에서 "작동"샘플을 설정할 수 있습니까? –

@Brother, 다른 답변을 기반으로 div가 올바른 동작을하도록하는 쉬운 해결책이없는 것처럼 보입니다. * 또한 팝업 창 크기를 조정할 수 있으므로 일부 절대 위치를 던졌을뿐입니다. 나는 그것을 원했다. 더 깨끗한 해결책을 찾으려고했습니다. –

@Brother, 더 중요한 것은 웹 양식으로 Razor를 실행하는 것이 얼마나 쉬운가요? –

그것은 해야 당신이 단지 max-width 속성을 설정하면 일 div에 있으므로 설정된 너비를 초과 할 수 없습니다.

코드를 사용하려면이 값을 변경해야합니다. 이 예 :) 나는 그것이 탭 영역에 공간이 충분하지 않기 때문에 모두 왼쪽과 오른쪽 열 또는 오른쪽 열에 의지에 대한 고정 폭 왼쪽 하나의 아래로 이동을 설정하는 것이 좋습니다

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

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

div 
{ 
    border: 1px solid red; 
}

출처

2011-09-10 02:01:25 Joe

예 또는 심지어 "너비"도 작동해야합니다. –

예, 매우 사실 :) – Joe

@Philip and OP : 그래서 드롭 다운하지 않고 ** 크기를 조정할 수있는 유일한 방법은 팝업 창의 크기를 조정할 때 div에 절대 위치를 지정하는 것입니다. 방금 했어. 작동했지만, 이제 좀 더러운 느낌이 들었어. 깨끗한 방법이 있니? –

입니다. 따라서 탭 내용 영역도 너비 값으로 설정해야합니다. 당신은 공백 및 텍스트 오버 플로우를 설정할 필요가없는

당신은 실제로 면도기 구문을 사용하여 MVC를 사용할 필요가 없습니다

http://jsbin.com/uvibiz

출처

2011-09-10 02:15:04 lnguyen55

콘텐츠가 너무 크면 Divs가 부유하지 않습니다.

답변

관련 문제