具有相同div容器的html页面
我在一个html页面中遇到了一个问题，让我们看看注释后的代码。 事实上，当在代码中使用此DIV具有相同div容器的html页面,html,css,Html,Css,我在一个html页面中遇到了一个问题，让我们看看注释后的代码。 事实上，当在代码中使用此DIV和用于以下DIV时，第一个DIV不起作用。很难解释，让我们看看下面的评论 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>DIV DOES NOT WORK IN THIS CASE</title>
<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
在这种情况下，DIV不起作用
您在CSS中编写了clayer1容器
，而不是player1容器
。您似乎还缺少一些括号：
#match_management .matchesEditorContainer .matchesEditor .playerContainer
h2
#match_management .matchesEditorContainer .matchesEditor .playerContainer
h2
{
border-bottom: 1px solid #ccc;
}
在player1容器
和player2容器
中，您永远不会关闭第二个按钮：
<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>
+
在堆栈溢出时问此类问题（代码或编程相关），您很快就会得到ans。@Milan，请不要建议人们将问题转发到其他网站。如果合适，它将被迁移，这将导致重复。谢谢（也就是说，我认为目前的形式也不适合堆栈溢出。）首先，什么不起作用？其次，在你的css中有.clayer1Container
（以c
开头），你的意思可能是.player1Container
（以p
开头）。此外，你的所有规则都是在一些匹配管理下的。匹配编辑器container.matchesetteditor
选择器下的。由于，你们所有人，我关闭这个建议！