我正在尝试制作一个面向移动设备的网站，其中包含三张可水平滚动的卡片，并且仅占用用户设备的一个页面(100%)(无垂直滚动)。第一张卡片有文字，第二张卡片有天气小部件，第三张有谷歌地图小部件。现在有了代码，我在 CSS 技巧上发现它不起作用。下面是我的代码和结果。
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>结果:
最佳答案
请试试这个，我希望这是你想要的:
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>我从 .card 中删除了 display: inline-block，这导致 divs 彼此相邻显示，而不是在每个下方显示其他。
更新:
我在卡片正文中添加了 b 的选择器，因此时间和日程描述都显示在单独的一行中。
关于html - 水平滚动容器网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54068784/