Css 如何使我的骰子排成一行，而不是在彼此下面_Css_Styles

Css 如何使我的骰子排成一行，而不是在彼此下面

css

Css 如何使我的骰子排成一行，而不是在彼此下面,css,styles,Css,Styles,无论我做什么样的造型，我的四个骰子都不会排成一行。骰子是成对的，一对在另一对的下面，而我希望他们排成一行。我不知道我是否给它们命名错误，或者我不知道，对不起，我是javascript新手 <link rel="stylesheet" type="text/css" href="bigdice.css"> <body> <div id = "dice1"> Player 1 <script type ='text/javas

无论我做什么样的造型，我的四个骰子都不会排成一行。骰子是成对的，一对在另一对的下面，而我希望他们排成一行。我不知道我是否给它们命名错误，或者我不知道，对不起，我是javascript新手

 <link rel="stylesheet" type="text/css" href="bigdice.css">


<body>
          <div id  = "dice1"> Player 1


<script type ='text/javascript'> 
    var player1Dice1 = Math.floor (Math.random()*6)+1;
    var player1Dice2 = Math.floor (Math.random()*6)+1;</script> </div>


 <div id  = "dice2"> Player 2   
   <script> 


   var player2Dice1 = Math.floor (Math.random()*6)+1;
    var player2Dice2 = Math.floor (Math.random()*6)+1;

    var scoreP1 = player1Dice1 + player1Dice2;
    var scoreP2 = player2Dice1 + player2Dice2;

    var opentag = " <img src = 'die";
    var closetag = ".gif'>"; </script> </div>

    <div><script>
    var p1d1 = opentag + player1Dice1 + closetag; 
    var p1d2 = opentag + player1Dice2 + closetag; </script> </div>

   <div>
   <script> var p2d1 = opentag + player2Dice1 + closetag;
    var p2d2 = opentag + player2Dice2 + closetag; </script> </div>
    <script>




    document.write ("<div>Score: " + scoreP1);
    document.write(p1d1);
    document.write(p1d2);
    document.write ("<div>Score: " + scoreP2);
    document.write(p2d1);
    document.write(p2d2);
    if (scoreP1 > scoreP2) {
        document.write("<div>Player 1 wins.</div>");
    }
    else if (scoreP2 > scoreP1) {
        document.write("<div>Player 2 wins.</div>");
    }
    else {
        document.write("<div>Draw.</div>"); 
    }





    if (scoreP1 < scoreP2) {
        document.write("<div>Player 1 loses.</div>");
    }
    else if (scoreP2 < scoreP1) {
        document.write("<div>Player 2 loses.</div>");
    }
    else {
        document.write("<div>Draw.</div>"); 
    }
</script>
</body>
</html>

这是我的代码

 <link rel="stylesheet" type="text/css" href="bigdice.css">


<body>
          <div id  = "dice1"> Player 1


<script type ='text/javascript'> 
    var player1Dice1 = Math.floor (Math.random()*6)+1;
    var player1Dice2 = Math.floor (Math.random()*6)+1;</script> </div>


 <div id  = "dice2"> Player 2   
   <script> 


   var player2Dice1 = Math.floor (Math.random()*6)+1;
    var player2Dice2 = Math.floor (Math.random()*6)+1;

    var scoreP1 = player1Dice1 + player1Dice2;
    var scoreP2 = player2Dice1 + player2Dice2;

    var opentag = " <img src = 'die";
    var closetag = ".gif'>"; </script> </div>

    <div><script>
    var p1d1 = opentag + player1Dice1 + closetag; 
    var p1d2 = opentag + player1Dice2 + closetag; </script> </div>

   <div>
   <script> var p2d1 = opentag + player2Dice1 + closetag;
    var p2d2 = opentag + player2Dice2 + closetag; </script> </div>
    <script>




    document.write ("<div>Score: " + scoreP1);
    document.write(p1d1);
    document.write(p1d2);
    document.write ("<div>Score: " + scoreP2);
    document.write(p2d1);
    document.write(p2d2);
    if (scoreP1 > scoreP2) {
        document.write("<div>Player 1 wins.</div>");
    }
    else if (scoreP2 > scoreP1) {
        document.write("<div>Player 2 wins.</div>");
    }
    else {
        document.write("<div>Draw.</div>"); 
    }





    if (scoreP1 < scoreP2) {
        document.write("<div>Player 1 loses.</div>");
    }
    else if (scoreP2 < scoreP1) {
        document.write("<div>Player 2 loses.</div>");
    }
    else {
        document.write("<div>Draw.</div>"); 
    }
</script>
</body>
</html>


玩家1
var player1Dice1=Math.floor（Math.random（）*6）+1；
var player1Dice2=Math.floor（Math.random（）*6）+1；
玩家2
var player2Dice1=Math.floor（Math.random（）*6）+1；
var player2Dice2=Math.floor（Math.random（）*6）+1；
var scoreP1=玩家1dice1+玩家1dice2；
var scoreP2=玩家2Dice1+玩家2Dice2；
var opentag=“”；
变量p1d1=opentag+player1Dice1+closetag；
变量p1d2=opentag+player1Dice2+closetag；
变量p2d1=opentag+player2Dice1+closetag；
变量p2d2=opentag+player2Dice2+closetag；
document.write（“分数：+scoreP1”）；
文件编写（p1d1）；
文件编写（p1d2）；
document.write（“分数：+scoreP2”）；
文件编写（p2d1）；
文件编写（p2d2）；
如果（分数P1>分数P2）{
记录。写（“玩家1获胜”）；
}
否则如果（分数P2>分数P1）{
记录。写（“玩家2获胜”）；
}
否则{
文件。写（“画”）；
}
如果（分数P1<分数P2）{
文件。写（“玩家1输了。”）；
}
否则如果（分数P2<分数P1）{
文件。写（“玩家2输了。”）；
}
否则{
文件。写（“画”）；
}

如果您希望所有四个骰子都在同一行中，则应更改此选项：

 <link rel="stylesheet" type="text/css" href="bigdice.css">


<body>
          <div id  = "dice1"> Player 1


<script type ='text/javascript'> 
    var player1Dice1 = Math.floor (Math.random()*6)+1;
    var player1Dice2 = Math.floor (Math.random()*6)+1;</script> </div>


 <div id  = "dice2"> Player 2   
   <script> 


   var player2Dice1 = Math.floor (Math.random()*6)+1;
    var player2Dice2 = Math.floor (Math.random()*6)+1;

    var scoreP1 = player1Dice1 + player1Dice2;
    var scoreP2 = player2Dice1 + player2Dice2;

    var opentag = " <img src = 'die";
    var closetag = ".gif'>"; </script> </div>

    <div><script>
    var p1d1 = opentag + player1Dice1 + closetag; 
    var p1d2 = opentag + player1Dice2 + closetag; </script> </div>

   <div>
   <script> var p2d1 = opentag + player2Dice1 + closetag;
    var p2d2 = opentag + player2Dice2 + closetag; </script> </div>
    <script>




    document.write ("<div>Score: " + scoreP1);
    document.write(p1d1);
    document.write(p1d2);
    document.write ("<div>Score: " + scoreP2);
    document.write(p2d1);
    document.write(p2d2);
    if (scoreP1 > scoreP2) {
        document.write("<div>Player 1 wins.</div>");
    }
    else if (scoreP2 > scoreP1) {
        document.write("<div>Player 2 wins.</div>");
    }
    else {
        document.write("<div>Draw.</div>"); 
    }





    if (scoreP1 < scoreP2) {
        document.write("<div>Player 1 loses.</div>");
    }
    else if (scoreP2 < scoreP1) {
        document.write("<div>Player 2 loses.</div>");
    }
    else {
        document.write("<div>Draw.</div>"); 
    }
</script>
</body>
</html>

document.write ("<div>Score: " + scoreP1);
document.write(p1d1);
document.write(p1d2);
document.write ("<div>Score: " + scoreP2);
document.write(p2d1);
document.write(p2d2);

document.write（“分数：+scoreP1”）；
文件编写（p1d1）；
文件编写（p1d2）；
document.write（“分数：+scoreP2”）；
文件编写（p2d1）；
文件编写（p2d2）；

致：

 <link rel="stylesheet" type="text/css" href="bigdice.css">


<body>
          <div id  = "dice1"> Player 1


<script type ='text/javascript'> 
    var player1Dice1 = Math.floor (Math.random()*6)+1;
    var player1Dice2 = Math.floor (Math.random()*6)+1;</script> </div>


 <div id  = "dice2"> Player 2   
   <script> 


   var player2Dice1 = Math.floor (Math.random()*6)+1;
    var player2Dice2 = Math.floor (Math.random()*6)+1;

    var scoreP1 = player1Dice1 + player1Dice2;
    var scoreP2 = player2Dice1 + player2Dice2;

    var opentag = " <img src = 'die";
    var closetag = ".gif'>"; </script> </div>

    <div><script>
    var p1d1 = opentag + player1Dice1 + closetag; 
    var p1d2 = opentag + player1Dice2 + closetag; </script> </div>

   <div>
   <script> var p2d1 = opentag + player2Dice1 + closetag;
    var p2d2 = opentag + player2Dice2 + closetag; </script> </div>
    <script>




    document.write ("<div>Score: " + scoreP1);
    document.write(p1d1);
    document.write(p1d2);
    document.write ("<div>Score: " + scoreP2);
    document.write(p2d1);
    document.write(p2d2);
    if (scoreP1 > scoreP2) {
        document.write("<div>Player 1 wins.</div>");
    }
    else if (scoreP2 > scoreP1) {
        document.write("<div>Player 2 wins.</div>");
    }
    else {
        document.write("<div>Draw.</div>"); 
    }





    if (scoreP1 < scoreP2) {
        document.write("<div>Player 1 loses.</div>");
    }
    else if (scoreP2 < scoreP1) {
        document.write("<div>Player 2 loses.</div>");
    }
    else {
        document.write("<div>Draw.</div>"); 
    }
</script>
</body>
</html>

document.write（“分数：+scoreP1+”）；
document.write（“分数：+scoreP2+”）；
文件写入（p1d1+p1d2+p2d1+p2d2）；

如果以后决定将它们放在

div

中，可以使用

document.getElementById（）
请也包括您的CSS。到目前为止，我所拥有的只是#dice1{left:100px}#dice right:100px}有效，但我希望播放器1位于第一对之上，播放器2位于第二对之上？赢家和输家也一样？我该怎么办that@denishassle将Player1的信息放在第一个div中，将Player2的信息放在第二个div中。给第二个div指定一个宽度
和一个浮动：右
 <link rel="stylesheet" type="text/css" href="bigdice.css">


<body>
          <div id  = "dice1"> Player 1


<script type ='text/javascript'> 
    var player1Dice1 = Math.floor (Math.random()*6)+1;
    var player1Dice2 = Math.floor (Math.random()*6)+1;</script> </div>


 <div id  = "dice2"> Player 2   
   <script> 


   var player2Dice1 = Math.floor (Math.random()*6)+1;
    var player2Dice2 = Math.floor (Math.random()*6)+1;

    var scoreP1 = player1Dice1 + player1Dice2;
    var scoreP2 = player2Dice1 + player2Dice2;

    var opentag = " <img src = 'die";
    var closetag = ".gif'>"; </script> </div>

    <div><script>
    var p1d1 = opentag + player1Dice1 + closetag; 
    var p1d2 = opentag + player1Dice2 + closetag; </script> </div>

   <div>
   <script> var p2d1 = opentag + player2Dice1 + closetag;
    var p2d2 = opentag + player2Dice2 + closetag; </script> </div>
    <script>




    document.write ("<div>Score: " + scoreP1);
    document.write(p1d1);
    document.write(p1d2);
    document.write ("<div>Score: " + scoreP2);
    document.write(p2d1);
    document.write(p2d2);
    if (scoreP1 > scoreP2) {
        document.write("<div>Player 1 wins.</div>");
    }
    else if (scoreP2 > scoreP1) {
        document.write("<div>Player 2 wins.</div>");
    }
    else {
        document.write("<div>Draw.</div>"); 
    }





    if (scoreP1 < scoreP2) {
        document.write("<div>Player 1 loses.</div>");
    }
    else if (scoreP2 < scoreP1) {
        document.write("<div>Player 2 loses.</div>");
    }
    else {
        document.write("<div>Draw.</div>"); 
    }
</script>
</body>
</html>