1. 首頁
  2. 問答
  3. 兩個浮動列 - 一個固定，一個寬度爲

兩個浮動列 - 一個固定，一個寬度爲

2011-01-13 33 views
37

我已經看過SO，但我找不到匹配我的發生的一個，我基本上有兩列固定寬度（185px），另一列沒有固定寬度，然而，我需要最後一列填補最後一個空間，例如兩個浮動列 - 一個固定，一個寬度爲

........................................... 
.--------- ------------------------------. 
.+  + +       +. 
.+  + +       +. 
.+  + +       +. 
.+  + +       +. 
.+  + ------------------------------. 
.+  +        . 
.+  +        . 
.+  +        . 
.---------        . 
...........................................

第一列應始終爲100％，以底當第二柱填充剩餘寬度，它們都被浮置left，如果我調整瀏覽器窗口，第二列表示第一列下。我需要第二列來填充剩餘寬度，並在調整瀏覽器窗口大小時靈活。

來源

2011-01-13 MacMac

回答

2

看看this。 沒有任何演示，但我以前使用過這個人的教程，所以我認爲它工作正常。我從文章中收集到主要內容是流動的。側面內容也可能是液體，但我認爲你可以給它一個固定的寬度，並留下它。這裏的訣竅是首先放置主要內容。

來源

2011-01-13 03:23:29 Zomxilla

4

編輯使用Flexbox的解決方案，這個時候，做出使用flex: 185px 0 0;固定在左邊的列，然後作出正確的列自動增長使用flex-grow:1

*{ 
 
    box-sizing: border-box; 
 
} 
 

 
body{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
#container{ 
 
    display:flex; 
 
} 
 

 
#left{ 
 
    height: 100vh; 
 
    flex: 185px 0 0; 
 
    background-color:tomato; 
 
} 
 

 
#right{ 
 
    flex-grow: 1; 
 
} 
 

 
#right > div{ 
 
    background:pink; 
 
}
<body> 
 
    <div id="container"> 
 
     <div id="left"> Left </div> 
 
     <div id="right"> 
 
     <div> 
 
     Right <br/> 
 
     dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body>

來源

2011-01-13 03:25:54

+5

右列不會自動填充這樣的可用空間，而是使用所需的最小空間來顯示其內容。 – 2013-03-26 10:54:56

+0

@TimothyGroote這裏是我使用flexbox```更新的解決方案，右欄現在應該填充/增長到可用空間https://jsfiddle.net/ouymLfoz/謝謝。 – 2017-07-18 07:47:12

+1

好的，這似乎工作。但爲什麼你不更新答案？ – 2017-07-18 14:02:23

62

實際上，有一個簡單的方法來做到這一點比使用花車：

.container { 
    position: relative; 
} 

.left { 
    width: 185px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.right { 
    margin-left: 185px; 
}

來源

2011-01-13 03:26:29 Jacob

1

如果你不想既不使用floa TS也不是絕對的定位，我能想出的最簡單的是

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     body { 
     white-space: nowrap; 
     } 
     div.left { 
     display: inline-block; 
     width: 200px; 
     white-space: normal; 
     background-color: red; 
     vertical-align: top; 
     } 
     div.right { 
     display: inline-block; 
     white-space: normal; 
     background-color: green; 
     } 
    </style> 
    <title></title> 
    </head> 
    <body> 
    <div class="left"> 
     left 
    </div> 
    <div class="right"> 
     right 
    </div> 
    </body> 
</html>

來源

2013-05-08 12:37:56 Sebastian

1

的 「位置：絕對的;」答案很不錯，但它具有跨瀏覽器的含義，特別是如果您正在爲IE開發的話。做到這一點，最好的辦法是：

<html> 
<head> 
<style> 
    div.right { 
     float: right; 
     width: 200px; 
    } 
    div.left { 
     margin-right: 200px; 
    } 
    div.clear { 
     clear: both; 
    } 
</style> 
</head> 
<body> 
    <div class="right"><!--your code here--></div> 
    <div class="left"><!--your code here--></div> 
    <div class="clear"></div> 
</body> 
</html>

請注意，您需要在右側的DIV首先在HTML調用。另外，請注意清除列後的浮動內容，如果您的內容在下面或者有父容器，這些內容將派上用場。

來源

2014-02-06 18:13:12

相關問題

 相關問題