0

可変幅の div をルールに沿ってパーセンテージで配置しながら中央に配置するにはどうすればよいですか?

下の最初の画像では、105.4has left: 12%. 問題は、その 12% が中央ではなく左端に適用されることです。

下の 2 番目の画像のように、端ではなく中央を 12% に配置して、たとえば 12% に配置するにはどうすればよいでしょうか?

コードについては、この JSFiddleを参照してください。Javascript が使えず、105.4div の幅を固定できません。

4

3 に答える 3

1

これが最も簡単な解決策だと思います。幅を 1 つだけ指定する必要があります。(余白や左の値に触れる必要はありません)

このデモをチェックしてください[デモンストレーションする複数の幅]

これはHTMLです(別のラッパーを追加し、 を移動しましたy)

<div class="x">
    <div class="a">
        <div class="b" style="width:12%;">
            <div class="c"><div class="y">105.4</div></div>
        </div>
    </div>
</div>

CSS: (そのほとんどはあなたからコピーされたものです)

.x {
    width: 300px;
    font-size: 16px;
    line-height: 20px;
}
.y {
    display: inline-block;
    background-color: #eee;
    padding: 0 3px;
}
.a {
    height: 5px;
    background-color: #007d61;
}
.b
{
    height: 100%;
    background-color: #f00000;
    position:relative;
}
.c
{
    position: absolute;
    width: 200%;
    text-align: center;
    bottom: 100%;
}
body {
    padding: 50px;
}
于 2013-10-09T07:10:49.487 に答える
1

セットしdiv.yた新品div.cを包み込みます。はwidth: 24%;text-align: center;24%12% * 2

jsFiddle

HTML

<div class="x">
    <div class="c" style="width:24%;text-align:center;">
        <div class="y">105.4</div>
    </div>
    <div class="a">
        <div class="b" style="width:12%;margin-right:auto;"></div>
    </div>
</div>
于 2013-10-09T06:33:01.280 に答える