水平對齊兩個DIV，其中一個DIV是恆定寬度

我想創建兩個DIV，一個容器DIV（其中包含任意內容）和一個箭頭DIV，允許用戶水平滾動內容。水平對齊兩個DIV，其中一個DIV是恆定寬度

忽略的Javascript方面，基本的佈局和CSS可能是這樣的：

<!DOCTYPE html> 
<html> 
<head> 
<style> 

.outer-wrapper { 
    min-width:275px; 
    overflow: hidden; 
    border: 1px solid #000000; 
    height: 40px; 
} 

.container { 
    width: 90%; 
    min-width:100px; 
    margin-left: 0.5em; 
    margin-right: 0.5em; 
    height: 40px; 
    overflow: hidden; 
    white-space: nowrap; 
    float: left; 
} 

.inner-content { 
    margin-top: 10px; 
    white-space: no-wrap; 
    position: relative; 
    display: inline-block; 
    white-space: nowrap; 
} 

.inner-element { 
    display: inline-block; 
} 

.arrow { 
    margin-top: 12px; 
    min-width: 30px; 
    font-size: 10px; 
    text-align: right; 
    margin-right: 2px; 
} 

</style> 
</head> 

<body> 
    <div class = "outer-wrapper"> 
     <div id = "container" class = "container"> 
      <div class = "inner-content" id = "inner-content"> 
       Options Options Options Options Options Options Options Options Options 
      </div> 
     </div> 
     <div id = "arrow" class = "arrow"> 
      &#x25b6; 
     </div> 
    </div> 
</body> 
</html>

這裏的顯示渲染的jsfiddle鏈接：http://jsfiddle.net/RSTE9/1/

我的問題理想情況下，我希望包含箭頭的DIV儘可能小，以便屏幕的大部分寬度由容器DIV組成。

爲了做到這一點，我想我會設置容器DIV的寬度爲98%，箭頭DIV的寬度爲2％。不幸的是，這會導致箭頭DIV在較小的屏幕尺寸上換行到下一行。

基本問題是，我希望箭頭DIV總是佔用屏幕的一小部分，但我找不到使用百分比來實現這一點的方法。如果屏幕寬度很大，箭頭DIV總是佔用太多空間。但是，如果屏幕寬度非常小（例如在移動設備上），則箭頭DIV可能會被推到下一行。我玩過不同的百分比值，但看起來沒有辦法獲得理想的價值。我的寬度爲90% - 在小屏幕上看起來不錯，但在大屏幕上，這意味着箭頭DIV佔用了屏幕的10％！

我想使用CSS3媒體查詢動態調整百分比，但我想知道是否有一些更簡單的解決方案，我只是沒有想到。

來源

2013-06-03 Channel72

我建議使用CSS計算值將是的回答： CSS Calc on MDN

給箭頭的div固定的大小和所述容器中的計算值（100％-30px）：

.container { 
    width: calc(100%-30px); 
    min-width:100px; 
    margin-left: 0.5em; 
    margin-right: 0.5em; 
    height: 40px; 
    overflow: hidden; 
    white-space: nowrap; 
    float: left; 
}

這裏是關於jsFiddle的示例： http://jsfiddle.net/RSTE9/5/

注意我刪除了一些選項選項，以便更好地看到效果。您在主容器上有一個最小寬度，這可以防止更多的摺疊。

來源

2013-06-03 20:31:13

+1計算（）...我還沒有看到 – apaul

CSS正在成爲鐵桿:) –

也許有一天，我們將不再需要以前的jQuery;） – apaul

爲什麼不把容器的寬度設置爲「*」？

.container { 
     width: *; 
     min-width:100px; 
     margin-left: 0.5em; 
     margin-right: 0.5em; 
     height: 40px; 
     overflow: hidden; 
     white-space: nowrap; 
     float: left; 
    }

的jsfiddle：http://jsfiddle.net/RSTE9/6/

來源

2013-06-03 20:38:20

將導致箭頭DIV包裹在較小的屏幕尺寸上 – Channel72

好像你搞砸了一下使用float，顯示和白色空間。

顯示和白色空間是一個很好的線索，寬度稍微少一點。

的理念是：

設置塊容器寬度沒有寬度，也沒有溢出，但裕度和空白，

爲內部內容，復位空白正常，使用顯示代替浮動。

集最小寬度到文本的內容（100％ - 給予容器餘量）在兩個串聯boxe容器文本+箭頭

最後，垂直對齊。

.outer-wrapper { 
    min-width:275px; 
    white-space: nowrap; 
    margin:0 1%; 
} 
.container { 
    min-width:98%; 
    margin-left: 0.5em; 
    margin-right: 0.5em; 
    min-height: 40px; 
    vertical-align:middle; 
    border: 1px solid #000000; 
    display:inline-block; 
    white-space:normal; 
} 
.arrow { 
    font-size: 10px; 
    width:1em; 
    text-align: right; 
    display:inline-block; 
    vertical-align: middle; 
}

http://jsfiddle.net/GCyrillus/2e3du/1/

來源

2013-06-03 21:07:45

水平對齊兩個DIV，其中一個DIV是恆定寬度

回答

相關問題