Question

我找到了支架生成器的CSS和HTML。问题是当你缩小线条时。我试图将宽度从特定尺寸（例如149px）转换为百分比（例如15％），但无济于事。

有什么想法吗？

CSS

.tournament4-wrap, .tournament8-wrap, .tournament16-wrap, .tournament32-wrap {
    text-align: center;
}

/****** round 1 ******/
.round1-top, .round1-bottom {
    float: left;
    width: 150px;
    height: 2em;
}

.round1-top {
    line-height: 2.5em;
}

.round2-topwrap .round1-bottom {
    width: 149px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}

.round2-bottomwrap .round1-top {
    width: 149px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}

/****** round 2 ******/

.round2-top, .round2-bottom {
    float: right;
    width: 150px;
    height: 4em;
}

.round2-top {
    line-height: 6.5em;
}


.round3-topwrap .round2-bottom {
    width: 149px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}

.round3-bottomwrap .round2-top {
    width: 149px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}

.tournament4-wrap .round2-top {
    border-bottom: 1px solid #000;
}

.round2-topwrap, .round2-bottomwrap {
    float: left;
    width: 300px;
    height: 4em;
}

/****** round 3 ******/

.round3-top, .round3-bottom {
    float: right;
    width: 150px;
    height: 8em;
}

.round3-top {
    line-height: 14.5em;
}

.round4-topwrap .round3-bottom {
    width: 149px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}

.round4-bottomwrap .round3-top {
    width: 149px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}

.tournament8-wrap .round3-top {
    border-bottom: 1px solid #000;
}

.round3-topwrap, .round3-bottomwrap, .tournament4-wrap {
    float: left;
    width: 450px;
    height: 8em;
}

/****** round 4 ******/

.round4-top, .round4-bottom {
    float: right;
    width: 150px;
    height: 16em;
}

.round4-top {
    line-height: 30.5em;
}


.round5-topwrap .round4-bottom {
    width: 149px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}

.round5-bottomwrap .round4-top {
    width: 149px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}

.round4-topwrap, .round4-bottomwrap, .tournament8-wrap {
    float: left;
    width: 600px;
}

.tournament16-wrap .round4-top {
    border-bottom: 1px solid #000;
}

/****** round 5 ******/

.round5-top, .round5-bottom {
    float: right;
    width: 150px;
    height: 32em;
}

.round5-top {
    line-height: 62.5em;
}

.tournament32-wrap .round5-top {
    border-bottom: 1px solid #000;
}

.round5-topwrap, .round5-bottomwrap, .tournament16-wrap {
    float: left;
    width: 750px;
}

/****** round 6 ******/

.round6-top, .round6-bottom {
    float: right;
    width: 150px;
    height: 32em;
}

.tournament32-wrap {
    float: left;
    width: 900px;
}

/****** styles for the winner column ******/
.winner3, .winner4, .winner5, .winner6 {
    font-weight: bold;
    font-style: italic;
}

.winner3 {
    line-height: 8em;
}

.winner4 {
    line-height: 16em;
}

.winner5 {
    line-height: 32em;
}

.winner6 {
    line-height: 64em;
}

HTML

<title>8 Player Tournament</title>

<div class="tournament8-wrap">
    <div class="round4-top winner4">Winner</div>
    <div class="round3-topwrap">
        <div class="round3-top">Top finalist</div>
        <div class="round2-topwrap">
            <div class="round2-top">1-8 winner</div>
            <div class="round1-top">#1 seed</div>
            <div class="round1-bottom">#8 seed</div>
        </div>
        <div class="round2-bottomwrap">
            <div class="round2-bottom">4-5 winner</div>
            <div class="round1-top">#4 seed</div>
            <div class="round1-bottom">#5 seed</div>
        </div>
    </div>
    <div class="round3-bottomwrap">
        <div class="round3-bottom">Bottom finalist</div>
        <div class="round2-topwrap">
            <div class="round2-top">2-7 winner</div>
            <div class="round1-top">#2 seed</div>
            <div class="round1-bottom">#7 seed</div>
        </div>
        <div class="round2-bottomwrap">
            <div class="round2-bottom">3-6 winner</div>
            <div class="round1-top">#3 seed</div>
            <div class="round1-bottom">#6 seed</div>
        </div>
    </div>
</div>

Answer 1

更新的答案

问题在于149px的宽度。缩小时，这会导致舍入错误，导致项目意外换行。看起来这是为了解释1px边界。相反，如果您将框模型设置为border-box，则不必担心这一点 - 项目的宽度包括其边框大小（如果有）。

首先设置：

.tournament8-wrap * {
  box-sizing:border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

然后，将当前尺寸为width: 149px的所有项目设置为150px

更新小提琴： http://jsfiddle.net/11nLfa4g/6/

禁用缩放HTML CSS作为季后赛括号

1 个答案: