防止文字擴大收縮包裝div div

我有一個收縮包裹在一對其他divs的包裹，所以持有人沒有固定的寬度。在持有者內部還有另一個包含文本的div。當文字太多時，它會擴大夾持器，使其不再收縮。這是我的問題演示，http://jsfiddle.net/WSbAt/。這是爲照片畫廊頁面。防止文字擴大收縮包裝div div

我想沒有設置持有人的寬度可能沒有辦法，我不能做，因爲每行圖像的數量是動態的。我大概可以用jQuery來解決它，但希望有一個CSS解決方案。

編輯：我試圖不指定任何寬度，因爲每行的縮略圖數量是基於您的窗口大小。

演示：http://jsfiddle.net/WSbAt/

CSS：

#container 
{ 
    width:600px; /*only set for demo. will be random on live page*/ 
    border:1px solid black; 
    text-align:center; 
} 
#holder 
{ 
    display: inline-block; 
    border:2px solid blue; 
} 
.thumbnail 
{ 
    float:left; 
    width:100px; 
    height:100px; 
    background-color:red; 
    margin-right:10px; 
    margin-bottom:10px; 
} 
.expandedHolder 
{ 
    padding:10px; 
    border:2px solid yellow; 
    margin-bottom:10px; 
    margin-right:10px; 
} 
.fullImage 
{ 
    float:left; 
    width:250px;/*only set for demo. will be random on live page*/ 
    height:200px; 
    background-color:green; 
} 
.text 
{ 
    float:left; 
    margin-left:10px; 
}

HTML：

<div id="container"> 
    <div id="holder"> 
     <div class="thumbnail"></div> 
     <div class="thumbnail"></div> 
     <div class="thumbnail"></div> 
     <div class="thumbnail"></div> 
     <div style="clear:both;"></div> 
     <div class="expandedHolder"> 
      <div class="fullImage"></div> 
      <div class="text">some text here. some text here. some text here. </div> 
      <div style="clear:both;"></div> 
     </div> 
     <div style="clear:both;"></div> 
    </div> 
</div>

來源

2013-04-26 JoJo

使用CSS max-width屬性？ – VoidKing 2013-04-26 13:38:41

或CSS溢出：隱藏屬性？ – VoidKing 2013-04-26 13:39:10

我不知道最大寬度是多少，它取決於每行有多少縮略圖。 – JoJo 2013-04-26 13:41:04

我用jQuery來計算文本寬度應該是什麼。如果任何人都好奇，這就是你如何解決我的例子。

var textDiv = $(".text"); 
textDiv.hide();//hide the text to get holder width without text 

var holderWidth = $("#holder").width(); 
var imageWidth = $(".fullImage").width(); 
var textWidth = (holderWidth - imageWidth) - 45; 

textDiv.css("width", textWidth + "px"); 
textDiv.show();

來源

2013-04-26 20:18:18 JoJo

使用百分比寬度.fullImage和.text區段

 .fullImage 
     { 
      float:left; 
      width:70%; 
      height:200px; 
      background-color:green; 
     } 
     .text 
     { 
      width: auto; 
      float:left; 
      width:20%; 
      margin-left:10px; 
     }

這時如果文字g ETS對大量使用text-overflow

text-overflow:ellipsis;

或overflow

overflow:hidden;

http://jsfiddle.net/RubenJonker/WSbAt/5/

來源

2013-04-26 13:41:33

有沒有指定寬度的方法？我希望fullImage的高度設置爲200px，但我希望寬度設置爲自動，因爲圖像不會全部具有相同的寬高比。對不起，我沒有在我的代碼中解釋。 – JoJo 2013-04-26 14:01:35

我正在嘗試使用純CSS做同樣的事情。我發現了一種在Chrome中可用的黑客方式（我還沒有檢查其他瀏覽器）。

#container { 
    display: table-caption; /* Shrink the container */ 
    border:1px solid black; 
    text-align:center; 
}

來源

2015-09-24 09:38:12 user5371437

您可以設置.expandHolder位置「相對」，然後設置的.text位置爲「絕對」，然後使用「右」和「左」調整文本位置，這樣大的文本不會擴大你的.holder :)

.expandedHolder { 
    position: relative; /* set container's position to "relative" */ 
    <...> 
} 

.text { 
    margin-left: 10px; 
    position: absolute; /* then set our text position */ 
    right: 10px; 
    left: calc(250px + 10px); /* just to make it clear: width of image + padding */ 
}

這裏，看看the fiddle。

來源

2017-05-18 09:04:25 amariq

防止文字擴大收縮包裝div div

回答

相關問題