여러 div의 수평 컨테이너 사업부에

내가 주요 사업부의 맨 아래에있는 여러 div의와 사업부를 만들고 싶어

예

보여 이미

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

I 이 코드가 있지만 하단에 하위 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>

그러나 제대로 작동하지 않습니다.

다음은 고정 높이가 된 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

입니다.

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를 포함하기위한 별도의 사업부를 사용해야합니다.

<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 최고 %는 수직 위치를 제어 할 수 있도록, 당신은 기본 DIV에 비율을 높이 관계를 가질 수 있습니다.

건배.

출처

2013-05-16 17:45:40

안녕하세요! 귀하의 답변을 주셔서 감사합니다 실제로 매력처럼 작동합니다, 아이디어는 음악 스펙트럼을 만드는 것입니다, Jquery (높이) 자랄거야 모든 막대를 클릭하면, 나는 이미 함수로 테스트를 ...하지만 내가 빨간색을 클릭하면 하나는 주황색 막대가 다른 막대와 위치를 변경 ... 그래서 나는 주황색 막대 가이 예제를 확인해야합니다 http://jsfiddle.net/kelelehead/DD75W/3/ – kelelehead

바닥에 동적으로 DIV를 만들거나 많이 만들 필요가있는 경우에도 더 나은 방법은 바닥에 다른 컨테이너를 position:absolute으로 만드는 것입니다. Mauro Laurent는 이렇게 말합니다.

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

당신은 바이올린의 예를 볼 수 있습니다 jsfiddle.net/rafakol/SRVL7/1

당신이 CSS를 변경할 필요가 이뤄져 새로운 된 div 추가하는 경우.

희망이 있습니다.

출처

2013-05-16 18:47:18 rafakol

여러 div의 수평 컨테이너 사업부에

답변

관련 문제