css - CSS - Div コンテナ内に 2 つの Div を配置し、一方を他方の上にフロートさせる

Question

ユーザーがタブレットを回転させたときにスタイルシートを切り替えるアプリがあります。すべてを保持するコンテナ div があります。コンテナ div 内には 2 つの div があります。1 つの div には数学の問題があり、もう 1 つの div には黒板があります。

ランドスケープモードでは、数学の問題と黒板がそれぞれ隣にあります。これは正しく機能します。

例: ([数学の問題] [黒板]) --- 並べて

縦向きモードでは、数学の問題は黒板の上にある必要があります。今、彼らはちょうどお互いの上に積み上げられています。

例: ([数学の問題] [黒板]) --- 黒板は数学の問題の下にある

私のHTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>quiz</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="quiz.css" rel="stylesheet" />
    <script src="quiz.js"></script>
</head>
<body>
   <div class="container">
      <div class="mathSide">
      <!-- QUIZ STATS -->
         <div id="quizStats">
            <p class="alignLeft" id="statQuestionDiv"></p>
            <p class="alignCenter" id="statTimerDiv"></p>
            <p class="alignRight" id="statScoreDiv"></p>
         </div>
         <div style="clear: both;"></div>
         <!-- QUIZ STATS -->

         <!-- MATH EQUATION -->
         <div class="mathEquation">
            <div class="line1Num" id="line1NumDiv"></div>
            <div class="line2">
               <div class="line2Ope" id="line2OpeDiv"></div>
               <div class="line2Num" id="line2NumDiv"></div>
            </div>
            <div class="line">
               <div class="result"></div>
            </div>
         </div>
         <!-- MATH EQUATION -->

         <!-- ANSWERS -->
         <!-- Multiple choice -->
         <div class="center">
            <div id="multipleChoiceDiv">
               <button class="multipleChoice" id="btnChoice1"></button><br />
               <button class="multipleChoice" id="btnChoice2"></button><br />
               <button class="multipleChoice" id="btnChoice3"></button><br />
               <button class="multipleChoice" id="btnChoice4"></button>
            </div>
         </div>
         <!-- Multiple choice -->

         <!-- Fill in the blank -->
         <div class="center">
           <div id="fillBlankDiv">
              <input class="textBox2" id="userAnswer" type="text" />
              <button class="fillBlank" id="btn7">7</button>
              <button class="fillBlank" id="btn8">8</button>
              <button class="fillBlank" id="btn9">9</button><br />
              <button class="fillBlank" id="btn4">4</button>
              <button class="fillBlank" id="btn5">5</button>
              <button class="fillBlank" id="btn6">6</button><br />
              <button class="fillBlank" id="btn1">1</button>
              <button class="fillBlank" id="btn2">2</button>
              <button class="fillBlank" id="btn3">3</button><br />
              <button class="fillBlank" id="btn0">0</button>
              <button class="fillBlank" id="btnNeg">+/-</button>
              <button class="fillBlank" id="btnOk">OK</button>            
           </div>
         </div>
         <!-- Fill in the blank -->
         <!-- ANSWERS -->

         <!-- (IN)CORRECT -->
         <div class="center2">
            <div id="checkDiv"></div>
         </div>
         <!-- (IN)CORRECT -->
      </div>

      <!-- CANVAS -->
      <div class="canvasSide">
         <canvas id="can1" width="500" height="600" style="border:2px solid #fff; background-color: #026236;"></canvas>
      </div>
      <!-- CANVAS -->
   </div>

   <div id="appbar" data-win-control="WinJS.UI.AppBar">
       <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abErase', label:'Erase', icon:'&#xE0A4;'}" type="button"></button>
       <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abPause', label:'Pause', icon:'&#xE103;'}" type="button"></button>
       <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abHome', label:'Home', icon:'&#xE10F;'}" type="button"></button>
   </div>
</body>
</html>

私のCSS：

body {
    background-color: #00522c;
}

.container {
    width: 820px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
}

.center {
    text-align: center ;

}

.mathSide {
    width: 300px;
    float: left;
}

.canvasSide {
    width: 500px;
    float: left;
    margin-left: 20px;
}

/* QUIZ STATS */
.alignLeft {
    float: left;
    width: 33%;
    text-align: left;
    font-size: 125%;
    font-weight: bold;
}

.alignCenter {
    float: left;
    width: 33%;
    text-align: center;
    font-size: 125%;
    font-weight: bold;
}

.alignRight {
    float: left;
    width: 33%;
    text-align: right;
    font-size: 125%;
    font-weight: bold;
}
/* QUIZ STATS */

/* MATH EQUATION */
.mathEquation {
    width: 300px;
}

.line1Num, .line2 {
    width: 100%;
    text-align: right;
    display: table;
    font-size: 400%;
}

.line1Num {
    float: right;
    font-size: 400%;
}

.line2Ope {
    width: auto;
    float: left;
}

.line2Num {
    width: auto;
    float: right;
}

.line {
    width: 100%;
    text-align: right;
    border-top: 4px solid black;
    border-color: white;
}
/* MATH EQUATION */

/* ANSWERS */
.multipleChoice {
    width: 300px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 20px;
    font-size: 150%;
}

.multipleChoiceRed {
    width: 300px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 20px;
    font-size: 150%;
    background-color: red;
}

.multipleChoiceGreen {
    width: 300px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 20px;
    font-size: 150%;
    background-color: green;
}

.textBox {
}

.fillBlank {
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 10px;
    font-size: 150%;
}
/* ANSWERS */

/* (IN)CORRECT */
.center2 {
    text-align: center ;
    font-size: 300%;
}
/* (IN)CORRECT */

.textBox2[type="text"]
 {
font-size: 200%;
    text-align: right;
    color: #fff;
    background-color: #026236;

 }


.textBox2A[type="text"]
 {
font-size: 200%;
    text-align: right;
    color: #fff;
    background-color: red;

 }

.textBox2B[type="text"]
 {
font-size: 200%;
    text-align: right;
    color: #fff;
    background-color: green;

 }


@media screen and (-ms-view-state: snapped) {

}


@media screen and (-ms-view-state: fullscreen-portrait) {

    .mathSide {
    width: 300px;
    position: absolute;
}

.canvasSide {
    width: 500px;
    position: absolute;

}
}

css - CSS - Div コンテナ内に 2 つの Div を配置し、一方を他方の上にフロートさせる

0 に答える 0

Related

Reference