多個div水平上一個div容器

我想和位於主div的底部多個div一個div和我添加的所有div水平多個div水平上一個div容器

顯示例

------------------------ 
|      | 
| Main Div   | 
|      | 
|      | 
|-----|-----|   | 
| div | div |   | 
|----------------------|

我已經有這個代碼，但它不顯示底部的子div

<style> 
.spectrumcontainer{ 
    width: 1000px; 
    height: 400px; 
    border: solid 1px black; 
    /*margin-top: 0px; 
    margin-left: 0px;*/ 
    /*padding: 0px; 
    /*text-align: left; 
    vertical-align: bottom;*/ 
    position: relative; 
    /*float: none;*/ 
    overflow: auto; 
    white-space: nowrap; 
} 
.redbar{ 
    width: 35px; 
    height: 15px; 
    background: #ff0000; /* Old browsers */ 
    background: -moz-linear-gradient(left, #ff0000 0%, #ff0000 50%, #e50000 51%, #aa0000 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(50%,#ff0000), color-stop(51%,#e50000), color-stop(100%,#aa0000)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #ff0000 0%,#ff0000 50%,#e50000 51%,#aa0000 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #ff0000 0%,#ff0000 50%,#e50000 51%,#aa0000 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #ff0000 0%,#ff0000 50%,#e50000 51%,#aa0000 100%); /* IE10+ */ 
    bottom: 0; 
    left: 0; 
    /*position: absolute;*/ 
    float: left; 
    display: inline-block; 

} 
.orangebar{ 
    width: 35px; 
    height: 15px; 
    background: #ff7f00; /* Old browsers */ 
    background: -moz-linear-gradient(left, #ff7f00 0%, #fc8600 50%, #e26200 51%, #bf5c00 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff7f00), color-stop(50%,#fc8600), color-stop(51%,#e26200), color-stop(100%,#bf5c00)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #ff7f00 0%,#fc8600 50%,#e26200 51%,#bf5c00 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #ff7f00 0%,#fc8600 50%,#e26200 51%,#bf5c00 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #ff7f00 0%,#fc8600 50%,#e26200 51%,#bf5c00 100%); /* IE10+ */ 
    bottom: 0; 
    left:0; 
    /*position: absolute;*/ 
    float: left; 
    display: inline-block; 
} 
</style> 
<div class="spectrumcontainer"> 
    <div class="redbar"></div> 
    <div class="orangebar"></div> 
</div>

但它不能正常工作。

這裏是活生生的例子

http://jsfiddle.net/kelelehead/KQwnp/

來源

2013-05-16 kelelehead

喜歡這個http://jsfiddle.net/j08691/KQwnp/2/？ – j08691

這是'display'-和'vert.align'-ed http://jsfiddle.net/KQwnp/6/ –

這個想法是製作一個音樂頻譜，當我按下這個div時，它會增長（高度）到UP ，所以如果我使用它就像你的例子設置TOP：385當我點擊它的增長下來吧，而不是像這樣http://jsfiddle.net/kelelehead/TKKmA/ – kelelehead

我知道一個解決方案，如果您使用固定高度的div。

的html代碼：

<body> 
<div class="main"> 
    <div class="bottom"> 
     div #1 
    </div> 
    <div class="bottom"> 
     div #2 
    </div> 
    <div class="bottom"> 
     div#3 
    </div> 
</div> 
</body>

CSS：

.main{ 
    background-color: red; 
    height: 200px; 
    width: 100%; 
} 

.bottom{ 
    position: relative; 
    top:100px; 
    left:0px; 
    height: 100px; 
    width: 50px; 
    background-color: green; 
    color: white; 
    float: left; 
    margin-right: 3px; 
}

小提琴：

http://jsfiddle.net/aleruar/8gyH8/

來源

2013-05-16 17:31:38

你將不得不使用一個額外的div包含彩色的div。

<html> 
<head> 

<style> 
.spectrumcontainer{ 
    width: 1000px; 
    height: 500px; 
    border: solid 1px black; 
    /*margin-top: 0px; 
    margin-left: 0px;*/ 
    /*padding: 0px; 
    /*text-align: left; 
    vertical-align: bottom;*/ 
    position: relative; 
    /*float: none;*/ 
    overflow: auto; 
    white-space: nowrap; 
    display:table; 
} 

.barContainer { 
    position: absolute; 
    top: 95%; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: 15px; 
    margin: auto; 
    background:#ddd; 

    } 
.redbar{ 
    background: #ff0000; /* Old browsers */ 
    background: -moz-linear-gradient(left, #ff0000 0%, #ff0000 50%, #e50000 51%, #aa0000 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(50%,#ff0000), color-stop(51%,#e50000), color-stop(100%,#aa0000)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #ff0000 0%,#ff0000 50%,#e50000 51%,#aa0000 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #ff0000 0%,#ff0000 50%,#e50000 51%,#aa0000 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #ff0000 0%,#ff0000 50%,#e50000 51%,#aa0000 100%); /* IE10+ */ 
    float: left; 
    width: 35px; 
    height: 15px; 


} 
.orangebar{ 
    background: #ff7f00; /* Old browsers */ 
    background: -moz-linear-gradient(left, #ff7f00 0%, #fc8600 50%, #e26200 51%, #bf5c00 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff7f00), color-stop(50%,#fc8600), color-stop(51%,#e26200), color-stop(100%,#bf5c00)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #ff7f00 0%,#fc8600 50%,#e26200 51%,#bf5c00 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #ff7f00 0%,#fc8600 50%,#e26200 51%,#bf5c00 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #ff7f00 0%,#fc8600 50%,#e26200 51%,#bf5c00 100%); /* IE10+ */ 
    float: left; 
    width: 35px; 
    height: 15px; 
} 

</style> 
</head> 
<body> 

    <div class="spectrumcontainer"> 
     <div class="barContainer"> 
      <div class="redbar"></div> 
      <div class="orangebar"></div> 
      <div class="redbar"></div> 
      <div class="orangebar"></div> 
      <div class="redbar"></div> 
      <div class="orangebar"></div> 
      <div class="redbar"></div> 
      <div class="orangebar"></div> 
     </div> 
</div> 


</body>

見的例子在以下小提琴：

http://jsfiddle.net/DD75W/

.barContainer頂部％將讓你有一個百分比高度關係到基礎格，使您可以控制垂直位置。

乾杯。

來源

2013-05-16 17:45:40

嗨！感謝您的回答，事實上它的作用就像魅力一樣，我的想法是製作一個音樂頻譜，點擊任何一個可以用Jquery增長（高度）的酒吧，我已經用一個函數做了一個測試......但是當我點擊紅色一個橙色酒吧改變其位置與另一個酒吧......所以我需要橙色酒吧保持低於檢查這個例子http://jsfiddle.net/kelelehead/DD75W/3/ – kelelehead

如果你是在底部動態創建DIV，或者你需要有很多DIV，我認爲更好的方法是在底部創建另一個容器，如Mauro Laurent所說的那樣，position:absolute。

.containerBottom { 
    position:absolute; 
    bottom:0; 
    width:200px; 
}

您可以在小提琴看一個例子：jsfiddle.net/rafakol/SRVL7/1

如果添加您不需額外需要更改CSS新的DIV。

希望它有幫助。

來源

2013-05-16 18:47:18 rafakol

多個div水平上一個div容器

回答

相關問題