苦苦挣扎在一系列div上划一条线

时间：2014-03-16 21:37:08

标签： html css

这是我的代码

http://jsfiddle.net/B8JYN/1/ 

<style>
html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}
#outerdiv {
    height: 50%;
    width: 99%;
        left:1%;
    background-color: #000000;
    position:absolute;
    top:25%;
}       
#fretboard {
    position:absolute;
    width: 100%; 
    top:5%;
    height: 90%;
    background-color: red;
}

.stringTitle {
    height: 50%;
    background-color: #000000;
    position:absolute;
    top:25%;
    width:1%;
    background-color: #fff;
}

.string{
    height:16.666%
}

.fret{
    width:8%;
    float:left;
    height:100%;
}

.fretEnd{
    width:.3%;
    background-color:#e7ebea;
    float:left;
    height:100%;
}
.E1{
    background-color:green;
     height: 3%;
    margin-top: 11%;
}
.B{
    background-color:green;
     height: 3%;
    margin-top: 23.5%;
}
.G{
    background-color:green;
     height: 3%;
    margin-top: 23.5%;
}
.D{
    background-color:green;
     height: 3%;
    margin-top: 23.5%;
}
.A{
    background-color:green;
     height: 3%;
    margin-top: 23.5%;
}
.E2{
    background-color:green;
     height: 3%;
    margin-top: 23.5%;
}
</style>
<div class="stringTitle">
          <div class="string">E</div>
          <div class="string">B</div>
          <div class="string">G</div>
          <div class="string">D</div>
          <div class="string">A</div>
          <div class="string">E</div>
</div>
<div id="outerdiv">

    <div id="fretboard">
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fret">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>
        <div class="fretEnd">
              <div class="E1"></div>
              <div class="B"></div>
              <div class="G"></div>
              <div class="D"></div>
              <div class="A"></div>
              <div class="E2"></div>
        </div>

      </div>
</div>

我试图让绿线在垂直方向上均匀分布，并从左到右连续穿过。希望有道理吗？我试图仅使用百分比而不是指定px

1 个答案:

答案 0 :(得分：2)

基于百分比margin-top的值是相对于宽度的，因此如果浏览器的宽度发生变化，定位将不会保持一致。

  

8 Box model - 8.3 Margin properties

     

百分比是根据生成的包含块的宽度计算的。请注意，对于＆＃39; margin-top＆＃39;和＆＃39; margin-bottom＆＃39;同样。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

一种解决方案是绝对定位元素并使用基于百分比的top值。相对定位父元素以使它们绝对相对于父元素定位很重要，在本例中为.fret。

UPDATED EXAMPLE HERE 

.E1, .B, .G, .D, .A, .E2 {
    position:absolute;
    width:100%;
    background-color:green;
    height: 3%;
}
.E1 {
    top:9.6%;
}
.B {
    top:26.2%;
}
.G {
    top:42.9%;
}
.D {
    top:59.6%;
}
.A {
    top:76.4%;
}
.E2 {
    top:91.2%;
}

这些只是粗略估计。您当然可以根据需要更改值。

相关问题
最新问题