カウントダウンタイマーを水平に整列しようとしています（初回コーディング/ビルディング）

これは私の初めてのウェブサイト構築です。私は無料のブートストラップ3のテーマを選んで、そこからそれを編集してそれを試してみました。これまではうまくいっていますが、私は自分のサイトにカウントダウンタイマーを水平に置くことに問題があります（http://romy.landofthelegend.com/index.php?cID=1）カウントダウンタイマーを水平に整列しようとしています（初回コーディング/ビルディング）

私はHTML、js、CSSでうんざりしましたが、変更があれば代わりに単語区切りがあります。

var finalDate = '2017/04/14'; 
 
    $('div#counter').countdown(finalDate) 
 
    .on('update.countdown', function(event) { 
 

 
     $(this).html(event.strftime('<div class=\"half\">' + 
 
     '<span>%D <sup>days</sup></span>' + 
 
     '<span>%H <sup>hours</sup></span>' + 
 
     '</div>' + 
 
     '<div class=\"half\">' + 
 
     '<span>%M <sup>mins</sup></span>' + 
 
     '<span>%S <sup>secs</sup></span>' + 
 
     '</div>')); 
 

 
    });

.main-content-tablecell { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    z-index: 700; 
 
} 
 
.main-content-tablecell .row { 
 
    position: relative; 
 
    padding-top: 4.2rem; 
 
    padding-bottom: 15rem; 
 
} 
 
.main-content-tablecell #counter { 
 
    margin-bottom: 4.2rem; 
 
} 
 
.main-content-tablecell #counter:before, 
 
.main-content-tablecell #counter:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
.main-content-tablecell #counter:after { 
 
    clear: both; 
 
} 
 
.main-content-tablecell #counter .half { 
 
    float: left; 
 
} 
 
.main-content-tablecell #counter span { 
 
    float: left; 
 
    text-align: right; 
 
    color: #FFFFFF; 
 
    font-family: "roboto-black", sans-serif; 
 
    font-size: 12rem; 
 
    line-height: 1; 
 
    padding: 0; 
 
    margin-bottom: 1.5rem; 
 
} 
 
.main-content-tablecell #counter span sup { 
 
    font-family: "roboto-bold", sans-serif; 
 
    font-size: .17em; 
 
    color: rgba(255, 255, 255, 0.3); 
 
    top: -3.6em; 
 
    right: 1em; 
 
} 
 
.main-content-tablecell h1 { 
 
    font-size: 4.2rem; 
 
    line-height: 1.143; 
 
    color: #FFFFFF; 
 
    margin-bottom: 1.2rem; 
 
    max-width: 600px; 
 
    position: relative; 
 
} 
 
.main-content-tablecell p { 
 
    color: rgba(255, 255, 255, 0.3); 
 
    font-family: "roboto-regular", sans-serif; 
 
    font-size: 1.8rem; 
 
    max-width: 400px;

<div class="row"> 
 
    <div class="col-md-2 col-md-offset-5"> 
 
    <div class="col-twelve"> 
 
     <div id="counter"> 
 
     <div class="center-div"> 
 
      <span class="inner">94 <sup>days</sup></span> 
 
      <span class="inner">23 <sup>hours</sup></span> 
 
     </div> 
 
     <div class="center-div"> 
 
      <span class="inner"> 40 <sup>mins</sup></span> 
 
      <span class="inner">03 <sup>secs</sup></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

私はまだは、事前にありがとう:)学んでおりますので、説明とそれをできるだけシンプルにしてみてください！

出典

2017-01-10 Romy

あなたの更新されたコンテンツは、クラス "半分" ではなく "中央-DIV" を使用しています – JonSG

私は最初にブートストラップCSSを理解し、グリッドシステムと既存のコンポーネントの構造を理解することをお勧めします。すでにあるものを再利用してみてください。 http://getbootstrap.com/css/#overview

<!DOCTYPE html> 
 
<html lang="en"> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>Bootstrap</title> 
 

 
    <!-- Bootstrap --> 
 
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 

 
    </head> 
 
    <body> 
 

 
\t <div class="contianer"> <!-- Boostrap main contianer (Bootstrap requires a containing element to wrap site contents and house in grid system.) http://getbootstrap.com/css/#overview-container--> 
 
    <div class="row"> 
 
    <div class="col-md-2 col-md-offset-5"> 
 
     <div class="col-twelve"> 
 
      <div id="counter" class="text-center"></div> 
 
       
 
     </div> 
 
    </div> 
 
    </div> 
 
\t </div> 
 
\t 
 
\t <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
 
\t <script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script> 
 
\t <script> 
 
\t var finalDate = '2017/04/14'; 
 

 
    $('#counter').countdown(finalDate) 
 
    .on('update.countdown', function(event) { 
 

 
     $(this).html(event.strftime('<div>' + 
 
              '<span>%D <sup>days</sup></span>' + 
 
              '<span>%H <sup>hours</sup></span>' + 
 
              '</div>' + 
 
              '<div class=\"half\">' + 
 
              '<span>%M <sup>mins</sup></span>' + 
 
              '<span>%S <sup>secs</sup></span>' + 
 
              '</div>')); 
 

 
    }); 
 
\t </script> 
 
    </body> 
 
</html>

出典

2017-01-10 15:31:17

カウントダウンタイマーを水平に整列しようとしています（初回コーディング/ビルディング）

答えて

関連する問題