子内容没有使用背景CSS进行缩放
子内容没有使用背景CSS进行缩放
提问于 2018-07-08 11:23:34
我正在创建一个时间表，其中包含了从星期一到日的一份清单中的具体活动。下面是一个例子：
他们看起来都很棒，除了当你去“星期六”，因为有更多的内容，所以它需要另一行。背景没有与附加的内容一起缩放，所以现在它被推入了另一个部分。我想要的是背景，以更多的网页时，去“星期六”链接。因此，与“星期二”部分相比，我为“节目-日程安排”增加了几个部分
目前的代码是：
<div id="fh5co-schedule-section" class="fh5co-lightgray-section">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="heading-section text-center animate-box">
<h2>Class Timetable</h2>
<p>The Fitness Centre is always open during class times.</p>
</div>
</div>
</div>
<div class="row animate-box">
<div class="col-md-10 col-md-offset-1 text-center">
<ul class="schedule">
<li><a href="#" class="active" data-sched="tuesday">Tuesday</a></li>
<li><a href="#" data-sched="saturday">Saturday</a></li>
</ul>
</div>
<div class="row text-center">
<div class="col-md-12 schedule-container">
<div class="schedule-content active" data-day="tuesday">
<div class="col-md-3 col-sm-6">
<div class="program program-schedule">
<img src="images/fit-dumbell.svg" alt="Cycling">
<small>4:30PM - 5:30PM</small>
<h3>Kidzone Kickboxing</h3>
<span>John Doe</span>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="program program-schedule">
<img src="images/fit-yoga.svg" alt="">
<small>5PM - 6PM</small>
<h3>Capoeira<br>(Brazilian Martial Art)</h3>
<span>James Smith</span>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="program program-schedule">
<img src="images/fit-cycling.svg" alt="">
<small>6PM - 7PM</small>
<h3>Adult Kick Boxing</h3>
<span>Rita Doe</span>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="program program-schedule">
<img src="images/fit-boxing.svg" alt="Cycling">
<small>8PM - 9PM</small>
<h3>Boxing Workout</h3>
<span>John Dose</span>
</div>
</div>
</div>
<!-- END sched-content -->
<div class="schedule-content" data-day="saturday">
<div class="col-md-3 col-sm-6">
<div class="program program-schedule">
<img src="images/fit-dumbell.svg" alt="Cycling">
<small>8AM - 9:15AM</small>
<h3>Enshin Karate</h3>
<span>John Doe</span>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="program program-schedule">
<img src="images/fit-yoga.svg" alt="">
<small>9:15AM - 10:45AM</small>
<h3>Traditional Jiu jitsu</h3>
<span>James Smith</span>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="program program-schedule">
<img src="images/fit-cycling.svg" alt="">
<small>10:45AM - 11:45AM</small>
<h3>Kidzone Boxing</h3>
<span>Rita Doe</span>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="program program-schedule">
<img src="images/fit-boxing.svg" alt="Cycling">
<small>12PM - 1PM</small>
<h3>Kidzone kickboxing (beginners)</h3>
<span>John Dose</span>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="program program-schedule">
<img src="images/fit-boxing.svg" alt="Cycling">
<small>1PM - 2PM</small>
<h3>Intermediate kickboxing</h3>
<span>John Dose</span>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="program program-schedule">
<img src="images/fit-boxing.svg" alt="Cycling">
<small>2:15PM - 3:15PM</small>
<h3>Kidzone Mixed Martial Arts<br>(5-12 years)</h3>
<span>John Dose</span>
</div>
</div>
</div>
<!-- END sched-content -->
</div>
</div>
</div>
</div>
</div>CSS：
#fh5co-programs-section,
#fh5co-schedule-section,
#fh5co-team-section,
#fh5co-blog-section,
#fh5co-contact {
padding: 7em 0;
background-color: grey;
}
@media screen and (max-width: 768px) {
#fh5co-programs-section,
#fh5co-schedule-section,
#fh5co-team-section,
#fh5co-blog-section,
#fh5co-contact {
padding: 4em 0;
}
}
.schedule {
padding: 0;
margin: 0 0 40px 0;
}
.schedule li {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
font-size: 16px;
}
.schedule li a {
color: rgba(0, 0, 0, 0.5);
padding: 5px 20px;
cursor: pointer;
}
.schedule li a:active, .schedule li a:focus {
text-decoration: none;
}
.schedule li a.active {
background: #4CB648;
color: #fff !important;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
border-radius: 30px;
}
@media screen and (max-width: 768px) {
.schedule li {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
margin-bottom: 10px;
font-size: 18px;
}
}
.schedule-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.schedule-content.active {
opacity: 1;
visibility: visible;
}我这么多年来一直在玩，运气不佳。这是我下载的模板。我发现导致主背景大小的部分是：
#fh5co-schedule-section,
padding: 7em 0;
background-color: grey;例如，当我将填充更改为20em时，它就适合所有的内容。但其他几天只有一条线，太大了。
我试着把‘星期六’部分放在它自己的容器中，将主容器的代码复制到一个单独的‘星期六’部分，创建它自己的"div id“。或诸如：
<div class="schedule-content-saturday" data-day="saturday">
#fh5co-schedule-section-saturday {
padding: 20em 0;
}但上述任何一个似乎都不起作用。也许是因为整个部分都是填充的，而我却试图在星期六尝试填充特定的容器，因为我不希望整个部分缩放，只是为了“周六”按钮。
我是否需要每天转换成它自己的独立容器，还是有一种方法让我用背景缩放子容器？谢谢。
您可以在这里下载网站文件：
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-08 16:11:59
我会去：
- 删除容器上px中的高度，使其高度: auto；我猜它是由JS设置的？删除那个密码。 .调度-容器{高度: auto；}
- 然后生成css行。 .调度-内容{位置:相对；显示:块；不透明度: 0；高度: 0；溢出:隐藏；可见性:隐藏；-webkit-转换: 0.3s；-o-转换: 0.3s；}.调度-内容.活动{不透明: 1；高度:自动；可见性:可见；溢出:可见；}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51231491
复制相关文章
相似问题
腾讯云开发者
