0

関連するHTMLは次のとおりです。

    <div class="row">
        <div class="arrow box">&#9668;</div>Month Year<div class="dayMonth box"></div>&#9658;<div class="arrow box"></div>
    </div>

上記のHTMLがリンクしている.htmlファイルのcssは次のとおりです。

*
{
    margin: 0; 
    padding: 0; 
} 

body
{
    font-family: "Times New Roman"; 
    font-size: 12pt; 

} 

.dayMonth
{
    width: 80%; 
}

.arrow
{ 
    width: 10%; 
}

.row
{
    width: 58em; 
    background-color: gray; 
    margin-right: auto; 
    margin-left: auto; 
}

.box
{
    float: left; 
    text-align: center; 
}

これは出力です：

詳細参照

「行」はブラウザの右側の中央にありますが、その中のもの（2つの矢印と月の年）は私が望むことをしていません。

これが行うべきだと思うのは、2つの矢印があり、両方の幅が10％に送信され、dayMonthの幅が80％であるため、すべてのdivが「行」全体を占める必要があるためです（合計が100になるため） ％）そして、.dayMonth cssクラスはdivの中央に配置する必要があり、divは「行」の80％の中央に配置する必要があるため、テキスト「MonthYear」は「行」の中央に配置する必要があります。しかし、これは明らかに起こっていません。

別の解決策は必要ありません（それ自体）私が書いたコードが、表現したいという考えを表現しておらず、希望どおりに機能しない理由を知りたいのです。

％が幅をどのように支配するかを誤解しているに違いないと思います。http://www.w3schools.com/css/pr_dim_width.aspは、％の「含まれているブロックのパーセントで幅を定義する」と言っていますが、％は意図したとおりに実行する必要があるようです。 m完全に混乱しています。

どこが間違っているのですか？

4

4 に答える 4

2

これは Opera でうまくいきます。

の外側に「月年」があることに気付きました<div>。中に入れてみて、それが修正されるかどうかを確認してください。

編集
そして再び最後の矢印で、それは<div>タグの外にもあります。

HTML は次のようになります。 

<div class="row">
    <div class="arrow box">&#9668;</div><div class="dayMonth box">Month Year</div><div class="arrow box">&#9658;</div>
</div>

また、これを行うと、行<div>に高さがなくなるため、高さを明示的に設定することをお勧めします (20px を試してください)。

于 2010-11-15T16:43:40.520 に答える
1

HTML を修正すると、FF で問題なく動作します。空の div があり、Month Year と左矢印がそれぞれの div にありません。

firebugを使用したとき、私はこれをすぐに理解しました。firebug または chrome の開発者ツールを使用してデバッグする必要があります。

于 2010-11-15T16:49:01.473 に答える
1 
<div class="row">
    <div class="arrow box">&#9668;</div><div class="dayMonth box">Month Year</div><div class="arrow box">&#9658;</div>
</div>

div 内のコンテンツを使用して、このようなコードを試してください。FF、IE7/8、および Chrome で動作しました。#333333 のように、色に 16 進値を使用することをお勧めします。.row色は、IE7 以外のブラウザーではレンダリングされませんでした。

于 2010-11-15T16:52:27.107 に答える
1

まず、マークアップが間違っているため、問題が発生しています。これは、コンテンツが div 内ではなく、div の外にあることに関係しているため、フローティング要素で高さの問題が発生します。

修正した作品は次のとおりです。

http://jsbin.com/ezari4/edit

于 2010-11-15T16:55:37.327 に答える