多个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容器

回答

相关问题