Question

我目前正在为即将上线的网站使用JS倒计时元素的修改版本。我一直在学习大量如何使用flex网格，但是没有用block / inline-block等做很多事情。

目前当倒计时大约945px时，4个内嵌块框保持为4列并最终溢出到屏幕边缘：

我想要的结果是大约945px，4列将并排折叠成2个，文本仍然在他们正确的方框下。我正在乱搞改变chrome中的“inspect”中的代码并意外地成功完成了这一操作，但是4行文本仍然位于带有框的元素下面而不是在适当的位置。这是我想要的结果：

以下是代码：

https://codepen.io/Lancewalker/pen/QxpbZx

$(function (){

function countdown() {

var now = new Date();
var eventDate = new Date(2019, 0, 1);
var currentTime = now.getTime();
var evenTime = eventDate.getTime();

var remTime = evenTime - currentTime;

var sec = Math.floor(remTime / 1000);
var min = Math.floor(sec / 60);
var hur = Math.floor(min / 60);
var day = Math.floor(hur / 24);

 hur %= 24;
 min %= 60;
 sec %= 60;

hur = (hur < 10) ? "0" + hur : hur;
min = (min < 10) ? "0" + min : min;
sec = (sec < 10) ? "0" + sec : sec;

$('.seconds').text(sec);
$('.minutes').text(min);
$('.hours').text(hur);
$('.days').text(day);

setTimeout(countdown, 1000);
}

countdown();
});

    body {
    background-color: #333;
}
    .container {
    width: 800px;
    height: 350px;
    margin:  auto;
    text-align: center
}

    .container h2 {
    color: #fff;
    font-size: 30px;
    font-family: Exo, Arial, Sans-serif;
    padding: 50px 0 20px;
    font-weight: normal
}

    .container .content {
    width: 100%;
}

    .container .content > div {
    display: inline-block;
    margin: 35px 10px 0;
    width: 120px;
    height: 130px;
    background: rgb(146, 163, 191, .6);
    border-radius: 8px;
    border: 1px solid #fff;
    color: #fff;
    line-height: 138px;
    font-family: Exo, arial, sans-serif;
    font-size: 55px;
}

    .container .title {
    width: ;
    height: 50px;
    position: relative
}

    .container .title span {
    display: inline-block;
    width: 140px;
    font-size: 20px;
    font-family: 'Exo', arial, sans-serif;
    color: #fff;
    line-height: 50px;
}

<div class="container">
     <h2>Apartments Coming Soon!</h2>
     <div class="content">
       <div class="days">85</div>
       <div class="hours">22</div>
       <div class="minutes">33</div>
       <div class="seconds">54</div>
     </div>
     <div class="title">
       <span>Days</span>
       <span>Hours</span>
       <span>Minutes</span>
       <span>Seconds</span>
     </div>
   </div>

Answer 1

您将.container班级宽度设置为初学者的800px硬值。

.container {
    max-width: 800px;
    width: 90%;
    height: 350px;
    margin:  auto;
    text-align: center
}

进行这种简单的更改将使您的计时器方块在下方开始崩溃。你必须自己做一些更改，但我会研究媒体查询和％的响应式设计。无论何时硬编码800px这样的数字，当你达到较小的尺寸时，你都会遇到问题。

我还会考虑重构你的HTML，以便时间方块和标题在一起。

<div class="time-square">
    <div class="time-square-time">88</div>
    <div class="time-square-title">Days</div>
</div>

您可以通过这种方式更清晰地移动HTML，您将遇到一些与当前结构中的标题匹配的问题

Answer 2

我建议稍微重组您的标记 - 将数字和文本（＆＃39; day＆＃39;，＆＃39; hour＆＃39;等）包装在同一个父级中。这将确保在内容被包装时它们保持在一起。

对于CSS，将width: 800px更改为max-width - 这可确保内容在小于800像素的屏幕上调整大小。

然后，您可以使用CSS Grid来布局框并简化代码。

Codepen

＆＃13;

$(function() {

  function countdown() {

    var now = new Date();
    var eventDate = new Date(2019, 0, 1);
    var currentTime = now.getTime();
    var evenTime = eventDate.getTime();

    var remTime = evenTime - currentTime;

    var sec = Math.floor(remTime / 1000);
    var min = Math.floor(sec / 60);
    var hur = Math.floor(min / 60);
    var day = Math.floor(hur / 24);

    hur %= 24;
    min %= 60;
    sec %= 60;

    hur = (hur < 10) ? "0" + hur : hur;
    min = (min < 10) ? "0" + min : min;
    sec = (sec < 10) ? "0" + sec : sec;

    $('.seconds').text(sec);
    $('.minutes').text(min);
    $('.hours').text(hur);
    $('.days').text(day);

    setTimeout(countdown, 1000);
  }

  countdown();
});

＆＃13;

body {
  background: #333;
}

.container {
  max-width: 800px;
  height: 350px;
  margin: auto;
  text-align: center;
}

.container h2 {
  color: #fff;
  font-size: 30px;
  font-family: Exo, Arial, Sans-serif;
  padding: 50px 0 20px;
  font-weight: normal;
}

.content {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  /* use grid gap instead of margin around boxes */
  grid-gap: 10px;
  justify-content: center;
}

.box>div {
  height: 130px;
  background: rgb(146, 163, 191, 0.6);
  border-radius: 8px;
  border: 1px solid #fff;
  color: #fff;
  font-family: Exo, arial, sans-serif;
  font-size: 55px;
  margin-bottom: 20px;
  /* use flexbox instead of lineheight for vertical centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

.box span {
  display: inline-block;
  font-size: 20px;
  font-family: "Exo", arial, sans-serif;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h2>Apartments Coming Soon!</h2>
  <div class="content">

    <div class="box">
      <div class="days">85</div>
      <span>Days</span>
    </div>
    <div class="box">
      <div class="hours">22</div>
      <span>Hours</span>
    </div>
    <div class="box">
      <div class="minutes">33</div>
      <span>Minutes</span>
    </div>
    <div class="box">
      <div class="seconds">54</div>
      <span>Seconds</span>
    </div>
  </div>
</div>

＆＃13;

Answer 3

只要分成div的两个部分，它看起来会很好。

如果我误解了你的问题，请告诉我。

＆＃13;

$(function (){

function countdown() {

var now = new Date();
var eventDate = new Date(2019, 0, 1);
var currentTime = now.getTime();
var evenTime = eventDate.getTime();

var remTime = evenTime - currentTime;

var sec = Math.floor(remTime / 1000);
var min = Math.floor(sec / 60);
var hur = Math.floor(min / 60);
var day = Math.floor(hur / 24);

 hur %= 24;
 min %= 60;
 sec %= 60;

hur = (hur < 10) ? "0" + hur : hur;
min = (min < 10) ? "0" + min : min;
sec = (sec < 10) ? "0" + sec : sec;

$('.seconds').text(sec);
$('.minutes').text(min);
$('.hours').text(hur);
$('.days').text(day);

setTimeout(countdown, 1000);
}

countdown();
});

＆＃13;

body {
    background-color: #333;
}
    .container {
    width: 800px;
    height: 350px;
    margin:  auto;
    text-align: center
}

    .container h2 {
    color: #fff;
    font-size: 30px;
    font-family: Exo, Arial, Sans-serif;
    padding: 50px 0 20px;
    font-weight: normal
}

    .container .content {
    width: 100%;
}

    .container .content > div {
    display: inline-block;
    margin: 35px 10px 0;
    width: 120px;
    height: 130px;
    background: rgb(146, 163, 191, .6);
    border-radius: 8px;
    border: 1px solid #fff;
    color: #fff;
    line-height: 138px;
    font-family: Exo, arial, sans-serif;
    font-size: 55px;
}

    .container .title {
    width: ;
    height: 50px;
    position: relative
}

    .container .title span {
    display: inline-block;
    width: 140px;
    font-size: 20px;
    font-family: 'Exo', arial, sans-serif;
    color: #fff;
    line-height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
     <h2>Apartments Coming Soon!</h2>
     <div class="content">
       <div class="days">85</div>
       <div class="hours">22</div>
     </div>
     <div class="title">
       <span>Days</span>
       <span>Hours</span>
     </div>
     <div class="content">
       <div class="minutes">33</div>
       <div class="seconds">54</div>
     </div>
     <div class="title">
       <span>Minutes</span>
       <span>Seconds</span>
     </div>
   </div>

＆＃13;

Answer 4

您可以使用 CSS媒体查询，如下所示：

@media (max-width: 992px) {
 .container .content > div, .container .title span {
  width: 20%;
 }
}
@media (max-width: 768px) {
 .container .content > div, .container .title span {
  width: 50%;
 }
}

使此Javascript倒计时计时器响应

4 个答案: