Question

我的代码在这里有一个小提琴：https://jsfiddle.net/grqdpeyh/

.scoreboard{
margin-left: 70%;
position: absolute;
padding-top: 1%;
}

.sc_place{
    height: 42px;
}

有五个div使用类 sc_place ，我需要它们位于轨道线之间。后台div（轨道）在Windows调整大小时自动调整大小。我设法让马匹随着轨道调整大小，但是不能用 sc_place div来做同样的事情。

顺便说一句，我在我的主网站上使用了引导程序，如果这对任何事都有帮助的话。

- 编辑 -

这是我中间区域的完整代码：

    <div class="col-md-7">
        <div class="panel panel-default">
            <div class="panel-body">

                <!-- PROGRESS -->

                <div class="progress text-center" style="height:30px">
                    <span id = "pbanner"></span>
                    <div class="progress-bar progress-bar-info progress-bar-striped" id="timebar" style="width:100%"></div>
                </div>

                <img class="img-responsive center-block" src="img/track/top.jpg"></img>
                <!--<img class="img-responsive center-block" src="img/track/main.jpg"></img>-->
                <div class="maintrack">
                    <div class="horse" style="margin-top: -8%;"></div>
                    <div class="horse" style="margin-top: -4%;"></div>
                    <div class="horse" style="margin-top: 0%;"></div>
                    <div class="horse" style="margin-top: 5%;"></div>
                    <div class="horse" style="margin-top: 9%;"></div>

                    <div class="scoreboard">
                        <div class="sc_place text-center">TEXT</div>
                        <div class="sc_place text-center">TEXT</div>
                        <div class="sc_place text-center">TEXT</div>
                        <div class="sc_place text-center">TEXT</div>
                        <div class="sc_place text-center">TEXT</div>
                    </div>
                </div>
                </div>
                </div>
                </div>

完全小提琴：https://jsfiddle.net/grqdpeyh/8/

但我认为这不重要。

Answer 1

为.sc_place试用此CSS：

.sc_place{
  height:5vw;
  font-size:3vw;
}
//in case of image in place of font this can be replace with font-size
background: url(http://buruburu.gr/wp-content/uploads/some_pigeons_are_more_equal_than_others/some_pigeons_are_more_equal_than_others_01.jpg) no-repeat contain;

或者查看一下：https://jsfiddle.net/arpit_goyal/x0gtqa8y/

Answer 2

您可以使用vw值设置行高：

sc_place{
    line-height:4.65vw
}

https://jsfiddle.net/grqdpeyh/1/

编辑：行高如我所见？ https://jsfiddle.net/grqdpeyh/9/

在div上放置几个div并更改大小

2 个答案: