个人中心
gpt4 book ai didi

javascript - 尝试水平对齐倒数计时器(第一次编码/构建)

转载 作者：行者123 更新时间：2023-11-28 04:34:15 24 4
gpt4 key购买 nike

这是我第一次建网站。我选择了一个免费的 bootstrap 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>

请尽可能简单地解释，因为我还在学习:)先感谢您!

最佳答案

我建议先复习一下 bootstrap 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>

	 <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>
	</div>
	
	 <!-- 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>
	<script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
	<script>
	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>'));

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

关于javascript - 尝试水平对齐倒数计时器(第一次编码/构建)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41572094/

24 4 0
文章推荐： javascript - 使用 WordPress 将 JSON 对象发送到 jQuery Tabs 的 AJAX
文章推荐： html - nth-child可以用在一个div上吗？
文章推荐： javascript - 如何改变html选择框的箭头颜色？
文章推荐： c++ - 这个 absl::StrCat 错误发生在 Abseil 还是 MSVC 中？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com