流體寬度和高度的色譜柱

我無法制作5列和流體寬度/高度的垂直條。我想要的是當頁面縮小高度增長時，每列中的文本仍在欄中。流體寬度和高度的色譜柱

這是我應該是什麼樣子和我有什麼： vertical bar

現在，如果我的屏幕變小文來到酒吧外和那不是我想要的。另外我無法獲得相同的列寬。有5列應該等於100％寬度，但每個20％都不起作用。

HTML：

<div id="wizard-steps"> 
<div class="wizard-header float-left">Kaderings analyseaanvraag</div> 
<div class="wizard-header float-left">Specificaties analyses : Type staal/stalen</div> 
<div class="wizard-header float-left">Specificaties analyses : Te bepalen componenten</div> 
<div class="wizard-header float-left">Specificaties analyses : Tijdschema en aantal stalen</div> 
<div class="wizard-header float-left">Data-analyse</div> 
</div>

CSS：

#wizard-steps { 
border-radius: 3px; 
border: 2px solid #a2c61c; 
width: 100%; 
height: 20px; 
margin: 0 auto; 
position: relative; 
} 

#wizard-steps div { 
    border-right: 2px solid #a2c61c; 
    width: 19%; 
    height: 20px; 
    text-align: center; 
    cursor: pointer; 
    float: left; 
} 

    #wizard-steps div:last-child { 
     border: white; 
    } 

.active-step { 
background-color: #a2c61c; 
color: white; 
}

任何幫助，將不勝感激！

修訂版CSS：（THX紅光滿面&豹）

#wizard-steps { 
border-radius: 3px; 
border: 2px solid #a2c61c; 
width: 100%; 
display: table;

}

#wizard-steps div { 
    border-right: 2px solid #a2c61c; 
    width: 19%; 
    text-align: center; 
    cursor: pointer; 
    display: table-cell; 
} 

    #wizard-steps div:last-child { 
     border: white; 
    } 

.active-step { 
background-color: #a2c61c; 
color: white; 
}

它得到我：

enter image description here

固定的任何機會當它增長時，積極的背景應該會增長嗎？由於19％，我也有一個右欄。

來源

2015-01-21 Nanou Ponette

這樣的事情？ [演示]（HTTP：//的jsfiddle。net/e63bhd5c /） – Ruddy 2015-01-21 08:50:58

這正是我想要的@Ruddy – 2015-01-21 08:56:37

您display: table/table-cell容器和內部div的值。並消除他們的高度和浮動。

#wizard-steps { 
    border-radius: 3px; 
    border: 2px solid #a2c61c; 
    width: 100%; 
    position: relative; /* you can remove that too */ 
    display: table; 
    /* margin: 0 auto isn't necessary when width is 100% */ 
} 

#wizard-steps div { 
    border-right: 2px solid #a2c61c; 
    width: 19%; 
    text-align: center; 
    cursor: pointer; 
    display: table-cell; 
} 

#wizard-steps div:last-child { 
    border: white; 
} 

.active-step { 
    background-color: #a2c61c; 
    color: white; 
}

http://jsfiddle.net/ew0ku220/

來源

2015-01-21 08:50:00 panther

多數民衆贊成我是怎麼做到的（我發表評論）+ 1. – Ruddy 2015-01-21 08:51:25

在HTML/CSS的一個常見的誤解是，「100％」是指「在瀏覽器窗口的100％」。相反，它意味着「我的父母的寬度的100％」。所以你需要檢查#wizard-steps的父項寬度是多少。我的猜測是那個沒有寬度的<body>元素 - 允許它增長以適應內容。

爲了解決這個問題，必須將所有的父元素width: 100%;，包括<body>和html：

body, html { width: 100%; }

接下來，設置的高度。如果你這樣做，那麼一個元素不能垂直增長。刪除這個。

來源

2015-01-21 08:53:33

你認爲，什麼是'html'和'身體的默認'寬度'？ – panther 2015-01-21 08:55:38

@panther：'auto'。 – 2015-01-21 09:03:15

不，它們的默認樣式爲'display：block;'（'body'爲'margin'），並且塊元素的寬度爲100％。沒有自動值。 – panther 2015-01-21 09:07:06

我會用這個Bootstrap。在那裏，你可以做這樣的事情：

<div class="container-fluid"> 
<div class="row" id="wizard-steps"> 
<div class="col-md-2">Kaderings analyseaanvraag</div> 
<div class="col-md-2">Specificaties analyses : Type staal/stalen</div> 
<div class="col-md-2">Specificaties analyses : Te bepalen componenten</div> 
<div class="col-md-2">Specificaties analyses : Tijdschema en aantal stalen</div> 
<div class="col-md-2">Data-analyse</div> 
</div> 
</div>

可以使用.row創建新的行和.col-md-*定義列在容器內。更改號碼將使您的列另一個大小。所有列在一起不應該比12高。

來源

2015-01-21 08:55:06

我嘗試使用bootstrap，但它與我的其他css碰撞。這是不幸的選擇:( – 2015-01-21 08:57:38

流體寬度和高度的色譜柱

回答

相關問題