时间戳

首页 > 解决方案 > 具有相同 div 容器的 html 页面

html - 具有相同 div 容器的 html 页面

问题描述

我的 html 页面有问题，让我们看看注释代码。事实上，当在代码中使用这个 DIV <div class="player1Container playerContainer">和 <div class="playerContainer playerContainer">下面的 DIV 时，第一个 DIV 不起作用。很难解释，让我们看看下面的评论。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>DIV DOES NOT WORK IN THIS CASE</title>
    <link href="../style/jquery-ui.css" type="text/css" rel="Stylesheet" />
    <link href="../style/main.css" type="text/css" rel="Stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" 
 type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery- 
  ui.min.js"></script>
    <script src="../js/main.js" type="text/javascript"></script>
 </head>
 <body>
<form name="matchEditorForm" action="javascript:;" onsubmit="saveEditor(); 
return false;">
    <input type="hidden" name="id" value="<?php echo $match->id; ?>" />

    <div class="elemId showId">ID: <?php echo $match->id; ?></div>
    <h2 class="showTitle">
            <input name="title" value="<?php echo $match->title; ?>" 
size="45" />
    </h2>
<div class="scoreboardContainer playerContainer">
<img src="/images/overlay_score_180.png" id="myImage" width="200" 
height="80" alt="scoreboard" style="float:left;margin:0 10px 0 120px;" 
border="3"/>
</div>

<!-- This does not work when with this CSS class --> 
    <div class="player1Container playerContainer">

<h2>Player 1</h2>
            <?php echo 
getViewable('views/match_management/player_select.php', array('name' => 
'p1_id', 'selected' => $match->p1_id, 'players' => 
MatchManager::getAllPlayers())); ?>

            <div class="score">
                    Score:
                    <br />
                    <input name="p1_match_score" value="<?php echo $match- 
 >p1_match_score; ?>" size="3" />
 <input name="p1_set_score" value="<?php echo $match->p1_set_score; ?>" 
size="3" /> <input name="p1_game_score" value="<?php echo $match- 
>p1_game_score; ?>" size="3" /> <input name="p1_points_score" value="<?php 
 echo $match->p1_points_score; ?>" size="3" />

            </div>
 </div>


    <div class="player2Container playerContainer">
            <h2>Player 2</h2>
            <?php echo 
 getViewable('views/match_management/player_select.php', array('name' => 
 'p2_id', 'selected' => $match->p2_id, 'players' => 
 MatchManager::getAllPlayers())); ?>

            <div class="score">
                    Score:
                    <br />
                    <input name="p2_match_score" value="<?php echo $match- 
 >p2_match_score; ?>" size="3" /> <input name="p2_set_score" value="<?php 
echo $match->p2_set_score; ?>" size="3" /> <input name="p2_game_score" 
value="<?php echo $match->p2_game_score; ?>" size="3" /> <input 
name="p2_points_score" value="<?php echo $match->p2_points_score; ?>" 
size="3" />
            </div>
            </div>
<button type="submit" style="border: 3px solid red;" 
class="matchSaver">Save</button>
</form>

<button type="button" class="matchDeleter">Delete Match Record</button>

<!-- This works fine --> 

<div class="player1Container playerContainer">
<div class="scoreauto">
<button type="button" name="p1s1plus" onclick="p1s1plus();" 
style="width:46px;border: 2px solid #7E0219;">+</button>
<button type="button" name="p1s2plus" onclick="p1s2plus();" 
</div>
</div>
<!--  -->
<div class="player2Container playerContainer">
<div class="scoreauto">
<button type="button" name="p2s1plus" onclick="p2s1plus();" 
style="width:46px;border: 2px solid #7E0219;">+</button>
<button type="button" name="p2s2plus" onclick="p2s2plus();" 
</div>
</div>

</body>

<script type="text/javascript">
setInterval(function() {
var myImageElement = document.getElementById('myImage');
myImageElement.src = '/images/overlay_score_180.png?rand=' + Math.random();
}, 2000);
</script>


<!-- increment data -->

<script type="text/javascript">
function p1s1plus () {
  $.ajax({
    url:"/script/p1s1.php", //the page containing php script
    type: "POST",
    asynch : true,
    data: 'p1s1plus'
 });
 }
</script>
<script type="text/javascript">
function p1s2plus () {
  $.ajax({
    url:"/script/p1s2.php", 
    type: "POST",
    asynch : true,
    data: 'p1s2plus'
 });
 }
</script>

the part of CSS code where is probably the problem:


#match_management .matchesEditorContainer .matchesEditor .playerContainer^M
{^M
    position: absolute;
    width: 250px;^M
}^M
#match_management .matchesEditorContainer .matchesEditor 
.scoreboardContainer^M
{^M
    position: absolute;^M
    width: 200px;^M
}^M
#match_management .matchesEditorContainer .matchesEditor .clayer1Container^M
{^M
    top: 160px;^M
    left: 10px;^M
}^M
#match_management .matchesEditorContainer .matchesEditor .player2Container^M
{^M
    top: 160px;^M
    left: 300px;^M
}^M
#match_management .matchesEditorContainer .matchesEditor .playerContainer 
h2^M
#match_management .matchesEditorContainer .matchesEditor .playerContainer 
h2^M
{^M
    border-bottom: 1px solid #ccc;^M
}^M
#match_management .matchesEditorContainer .matchesEditor .playerContainer 
.score^M
{^M
    margin-top: 15px;^M
    font-weight: bold;^M
}^M
#match_management .matchesEditorContainer .matchesEditor .playerContainer 
.scoreauto^M
{^M
    position: absolute;^M
    margin-top: 170px;^M
    font-weight: bold;^M
}^M

我认为这是一个 CONTAINER / CSS 问题，但我不知道如何解决它。

你能帮助我吗 ？

标签： htmlcss

解决方案

您已经用clayer1ContainerCSS 而不是player1Container. 您似乎也在这里缺少一些括号：

#match_management .matchesEditorContainer .matchesEditor .playerContainer 
h2
#match_management .matchesEditorContainer .matchesEditor .playerContainer 
h2
{
    border-bottom: 1px solid #ccc;
}

你永远不会关闭这里的第二个按钮player1Container和player2Container：

<div class="scoreauto">
    <button type="button" name="p1s1plus" onclick="p1s1plus();"  style="width:46px;border: 2px solid #7E0219;">+</button>
    <button type="button" name="p1s2plus" onclick="p1s2plus();" 
</div>

并且脚本应该在 body 或 head 标签中。我假设 CSS 来自main.css外部样式表，所以我不会说它应该在头部并包含在样式标签中。

推荐阅读