Question

我正在尝试制作一个带有三个卡的面向移动设备的网站，这些卡可以水平滚动，并且仅占据用户设备的一页（占页面的100％）（无垂直滚动）。第一张卡片上有文字，第二张卡片上有天气小部件，第三张卡片上有Google Maps小部件。现在使用代码，我在CSS Tricks上发现它不起作用。下面是我的代码和结果。

body {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: 18px;
  ;
}

h2 {
  font-family: 'Bungee Inline', cursive;
}

h3 {
  font-weight: bolder;
}

.card {
  -webkit-box-shadow: 7px 7px 66px 0px rgba(74, 74, 74, 0.75);
  -moz-box-shadow: 7px 7px 66px 0px rgba(74, 74, 74, 0.75);
  box-shadow: 7px 7px 66px 0px rgba(74, 74, 74, 0.75);
  border-radius: 10px;
  background-color: white;
  text-align: left;
  height: 300px;
  display: inline-block;
}

.card-body {
  text-align: left;
  padding-left: 15px;
  padding-top: 10px;
}

.scrolling-wrapper {
  height: 400px;
  padding: 10px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  background-color: ivory;
}

.card {
  display: inline-block;
}


}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="style.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Bungee+Inline|Poppins:400,600" rel="stylesheet">
  <title>Document</title>
</head>

<body>
  <h1>Document</h1>
  <h2>Wednesday January 16th, 2019</h2>

  <div class="scrolling-wrapper">
    <div class="card">
      <div class="card-body">
        <h3>Today's Schedule</h3>
        <p>
          <b>9:00 AM:</b> Go to the Park
          <b>12:00 PM:</b> Go to the Park
          <b>3:00 PM:</b> Go to the Park
        </p>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h3>Weather</h3>
        <a class="weatherwidget-io" href="https://forecast7.com/en/31d7735d21/jerusalem/?unit=us" data-label_1="JERUSALEM" data-label_2="WEATHER" data-font="Verdana" data-icons="Climacons" data-mode="Forecast" data-days="3" data-theme="pure">JERUSALEM WEATHER</a>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h3>Map</h3>
      </div>
    </div>
  </div>
  <script>
    ! function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = 'https://weatherwidget.io/js/widget.min.js';
        fjs.parentNode.insertBefore(js, fjs);
      }
    }(document, 'script', 'weatherwidget-io-js');
  </script>

</html>

结果：

Image Result from a computer

Result on Mobile

Answer 1

请尝试一下，希望它是您想要的：

body {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: 18px;
  ;
}

h2 {
  font-family: 'Bungee Inline', cursive;
}

h3 {
  font-weight: bolder;
}

.card {
  -webkit-box-shadow: 7px 7px 66px 0px rgba(74, 74, 74, 0.75);
  -moz-box-shadow: 7px 7px 66px 0px rgba(74, 74, 74, 0.75);
  box-shadow: 7px 7px 66px 0px rgba(74, 74, 74, 0.75);
  border-radius: 10px;
  background-color: white;
  text-align: left;
  height: 300px;

}

.card-body  p b{
  display: block;
}


.card-body {
  text-align: left;
  padding-left: 15px;
  padding-top: 10px;
}

.scrolling-wrapper {
  height: 400px;
  padding: 10px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  background-color: ivory;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="style.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Bungee+Inline|Poppins:400,600" rel="stylesheet">
  <title>Document</title>
</head>

<body>
  <h1>Document</h1>
  <h2>Wednesday January 16th, 2019</h2>

  <div class="scrolling-wrapper">
    <div class="card">
      <div class="card-body">
        <h3>Today's Schedule</h3>
        <p>
          <b>9:00 AM:</b> Go to the Park
          <b>12:00 PM:</b> Go to the Park
          <b>3:00 PM:</b> Go to the Park
        </p>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h3>Weather</h3>
        <a class="weatherwidget-io" href="https://forecast7.com/en/31d7735d21/jerusalem/?unit=us" data-label_1="JERUSALEM" data-label_2="WEATHER" data-font="Verdana" data-icons="Climacons" data-mode="Forecast" data-days="3" data-theme="pure">JERUSALEM WEATHER</a>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h3>Map</h3>
      </div>
    </div>
  </div>
  <script>
    ! function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = 'https://weatherwidget.io/js/widget.min.js';
        fjs.parentNode.insertBefore(js, fjs);
      }
    }(document, 'script', 'weatherwidget-io-js');
  </script>

</html>

我从display: inline-block中删除了.card，导致divs彼此相邻而不是彼此下方显示。

更新：
我在卡体内添加了b的选择器，因此在单独的一行中分别显示了时间表的时间和说明。

水平滚动容器页面

1 个答案: