除了一個元素之外的所有元素的動態寬度

我想在閱讀Ethan Marcote的代碼後更加「響應」代碼A Book Apart。除了一個元素之外的所有元素的動態寬度

我想出了一個我不知道如何解決的案例。在li元素中，我有四個不同的div s。第一個不能改變寬度或高度（我知道這是不響應的，但圖像尺寸必須保持不變）。其他三個div可以伸展，因爲它們只是文本。

現在，我知道我可以設置div s具有不同的父級寬度百分比，這很好，除了div1必須是一個定義的像素寬度。這會拋出其他百分比的計算結果（瀏覽器寬度 - 對於不同的瀏覽器大小，77px將是不同的數字），那麼我該怎麼做？

我掀起了這個來幫助說明我的問題。

enter image description here

正如我提到的，我知道我可以用JS設置文檔加載一個容器div的寬度和調整，但似乎，好了，沒有那麼大。

感謝所有幫助:)

來源

2011-09-05 GarethPrice

也許表出頭可以幫助

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      li { display: table; clear: both; width: 100% } 
      li div { display: table-cell; border: 1px solid blue; height: 1em } 
      .div1 { min-width: 65px; max-width: 65px } 
      .div2 { width: 60% } 
      .div3 { width: 10% } 
      .div4 { width: 30% } 
     </style> 
    </head> 
    <body> 
     <ul> 
      <li> 
       <div class="div1"></div> 
       <div class="div2"></div> 
       <div class="div3"></div> 
       <div class="div4"></div> 
      </li> 
      <li> 
       <div class="div1"></div> 
       <div class="div2"></div> 
       <div class="div3"></div> 
       <div class="div4"></div> 
      </li> 
     </ul> 
    </body> 
</html>

來源

2011-09-05 03:36:58 Leonid

+1這是（IMO）目前去無追加表標籤到HTML的最佳方式。但要小心，IE7及更高版本不支持display：table;和朋友 – xec

謝謝。這很棒！ – GarethPrice

@garthen;據我瞭解你的問題是你想要one div有fixed width &其他有dynamic widths。我這樣做，通過變化的div的順序

CSS：

li {overflow:hidden} 
      li div {border: 1px solid blue;} 
      .div1 { width:65px;float:left; background:red;} 
      .div2 {overflow:hidden; background:yellow;} 
      .div3 { width: 10%; float:right; background:green;} 
      .div4 { width: 30% ;float:right; background:pink;}

HTML：

<ul> 
      <li> 
       <div class="div1">1</div> 
       <div class="div4">4</div> 
       <div class="div3">3</div> 
       <div class="div2">2</div> 
      </li> 
      <li> 
       <div class="div1">1</div> 
       <div class="div4">4</div> 
       <div class="div3">3</div> 
       <div class="div2">2</div> 
      </li> 
     </ul>

可能這就是你想要&它也工作IE也。如果你想給你的第三&第四div fixed width然後也很好。

檢查演示更多http://jsfiddle.net/sandeep/4RPFa/67/

來源

2011-09-05 04:50:10 sandeep

在Firefox中，.div2似乎被推到它自己的行上 – xec

@xec;這是一個正常的過程，但如果你想讓其他div增加那裏的任何div增加的高度，你可以使用css3 display：table;屬性或創建一個基於表格的結構。 – sandeep

我不確定你的意思是「正常的過程」，但看看你的jsfiddle鏈接在Firefox。那麼你會在一行上得到div 1，3和4，在下一個div 2上 - 它們不對齊，在mac os和windows上的firefox 6中測試 – xec

除了一個元素之外的所有元素的動態寬度

回答

相關問題