0

一連のネストされた div があり、その中で 1 つのテキスト "TICKET NAME" を他の 2 つのテキストにオーバーフローさせようとしています。

望ましくない結果の図を次に示します。

ここに画像の説明を入力

そして、ここに私のコードがあります:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div id="game_head">

    <div id="timer">
    </div>

    <div id="flags">
        <div id="best_of">
        </div>
    </div>

    <div id="team_1">
        <span class="team_name">Team 1</span>
    </div>

    <div id="ticket">
        <span class="versus">VS</span>
        <span class="ticket_name">TICKET NAME</span>
    </div>

    <div id="team_2">
        <span class="team_name">Team 2</span>
    </div>
</div>
<div id="game_body">

</div>

<body>
</body>
</html>

私のCSSは次のようになります。

#game_head {
    height: 62px;
    width: 555px;
    background-color: #CCC;
}
#timer {
    height: 100%;
    width: 26%;
    background-color:#111;
    float:left;
}
#flags {
    height: 100%;
    width: 4%;
    background-color:#333;
    float:left;
}
#best_of{
    height:33%;
    background-color:#F00;  
}
#team_1 {
    height: 100%;
    width: 31.5%;
    background-color:#999;
    float:left;
    text-align:center;
    display:table;
}
#team_2 {
    height: 100%;
    width: 31.5%;
    background-color:#999;
    float:left;
    text-align:center;
    display:table;
}
#ticket {
    height: 100%;
    width: 7%;
    background-color:#333;
    float:left;
    overflow:visible;
}
span.ticket_name{
    color:#FFF; 
}
span.team_name{
    display: table-cell;
    vertical-align: middle;
}
span.versus{
    color:#F00;
}

「TICKET NAME」テキストを「ticket」div の中央に配置し、「team_1」および「team_2」div にスピルオーバーするにはどうすればよいですか?

前もって感謝します！

4

1 に答える 1

0

すべての div を絶対値にしてから、チケットの z-index を残りの部分よりも大きく設定し、それらよりも広くすることもできます。

于 2013-05-14T04:32:39.860 に答える