我有6个div浮动权。我已经使用百分比来表示响应,共享33.3%,连续3个div。我的笔记本电脑分辨率工作正常 - 但随着我调整屏幕尺寸越来越小,div开始崩溃。似乎无法找到解决办法,如果有人可以解释为什么会出现这种情况,尽管百分比是对我假定个别视口的引用?
.routine-content {
text-align: center;
}
.routine-content ul li {
display: block;
line-height: 1.1em;
font-family: 'amiri';
margin-top: 10px;
}
.routine {
max-width: 30.3333333333%;
float: left;
margin-top: 20px;
margin-left: 3%;
word-wrap: break-word;
vertical-align: top;
}
.routine-content h1 {
font-family: 'Pacifico', sans-serif;
font-size: 30px;
text-decoration: underline;
}
.routine-content h2 {
font-family: 'Amaranth';
margin-bottom: 10px;
font-size: 18px;
}
.routine span {
font-weight: bolder;
}
.routine-content p {
font-family: 'amiri';
width: 50%;
text-align: center;
margin: 0 auto;
margin-top: 20px;
font-size: 18px;
}
<div class="routine-content">
<div class="inner-wrapper">
<!-- Monday Routine -->
<div class="routine monday">
<h2>Monday</h2>
<ul>
<li>
<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees go over your toes during this lower-body move.
</li>
<li>
<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so your head..
</li>
<li>
<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
</li>
<li>
<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You can keep your legs on the ground for.
</li>
</ul>
</div>
<!-- Tuesday Routine -->
<div class="routine tuesday">
<h2>Tuesday</h2>
<ul>
<li>
<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees go over your toes during this lower-body move.
</li>
<li>
<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so. loor.
</li>
<li>
<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't available, try a bent-over row.
</li>
<li>
<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You can keep your legs on the ground.
</li>
</ul>
</div>
<!-- Wednsday Routine -->
<div class="routine wednesday">
<h2>Wednesday</h2>
<ul>
<li>
<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees..
</li>
<li>
<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so.
</li>
<li>
<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
</li>
<li>
<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You can keep your legs on the ground for this one if that feels more comfortable.
</li>
</ul>
</div>
<!-- Thursday Routine-->
<div class="routine thursday">
<h2>Thursday</h2>
<ul>
<li>
<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees go over your toes during this lower-body move.
</li>
<li>
<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so your head, back.
</li>
<li>
<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
</li>
<li>
<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: one if that feels more comfortable.
</li>
</ul>
</div>
<!-- Friday Routine -->
<div class="routine friday">
<h2>Friday</h2>
<ul>
<li>
<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your. and don't let your knees go over your toes during this lower-body move.
</li>
<li>
<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so your the bench, your feet flat on the floor.
</li>
<li>
<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
</li>
<li>
<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You .
</li>
</ul>
</div>
<!-- Saturday Routine -->
<div class="routine saturday">
<h2>Saturday</h2>
<ul>
<li>
<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your.
</li>
<li>
<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so. loor.
</li>
<li>
<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you, try a bent-over row.
</li>
<li>
<span>Lying Isometric Y</span>,—Hold for 30 seconds. You can keep your legs on the ground.
</li>
</ul>
</div>
</div>
</div>
答案 0 :(得分:1)
我不是很确定崩溃的意思,但我认为这应该解决它。您可以根据设备宽度激活不同的CSS(请参阅here)。我在下面这样做了。因此,当宽度低于500px时,锻炼将显示每行只有一个。否则,目前每行将有三个。您可以使用max-width
参数随意玩具,看看效果最佳。
.routine-content{
text-align:center;
}
.routine-content ul li{
display:block;
line-height:1.1em;
font-family:'amiri';
margin-top:10px;
}
.routine{
max-width:30.3333333333%;
float:left;
white-space: normal;
margin-top:20px;
margin-left:3%;
word-wrap:break-word;
vertical-align:top;
}
.routine-content h1{
font-family:'Pacifico',sans-serif;
font-size:30px;
text-decoration: underline;
}
.routine-content h2{
font-family:'Amaranth';
margin-bottom:10px;
font-size:18px;
}
.routine span{
font-weight: bolder;
}
.routine-content p{
font-family:'amiri';
width:50%;
text-align:center;
margin: 0 auto;
margin-top:20px;
font-size: 18px;
}
@media screen and (max-width: 500px) {
.routine {
text-align: center;
max-width:100%;
display: block;
float: center;
clear: both;
}
}
<div class = "routine-content">
<div class = "inner-wrapper">
<div style="width:100%;">
<!-- Monday Routine -->
<div align="center" class = "routine monday">
<h2 class="workoutheader">Monday</h2>
<ul>
<li>
<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees go over your toes during this lower-body move.
</li>
<li>
<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so your head..
</li>
<li>
<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
</li>
<li>
<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You can keep your legs on the ground for.
</li>
</ul>
</div>
<!-- Tuesday Routine -->
<div align="center" class = "routine tuesday">
<h2>Tuesday</h2>
<ul>
<li>
<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees go over your toes during this lower-body move.
</li>
<li>
<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so. loor.
</li>
<li>
<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't available, try a bent-over row.
</li>
<li>
<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You can keep your legs on the ground.
</li>
</ul>
</div>
<!-- Wednsday Routine -->
<div align="center" class = "routine wednesday">
<h2>Wednesday</h2>
<ul>
<li>
<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees..
</li>
<li>
<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so.
</li>
<li>
<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
</li>
<li>
<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You can keep your legs on the ground for this one if that feels more comfortable.
</li>
</ul>
</div>
</div>
<div align="center" style="width:100%">
<!-- Thursday Routine-->
<div class = "routine thursday">
<h2>Thursday</h2>
<ul>
<li>
<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your knees go over your toes during this lower-body move.
</li>
<li>
<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so your head, back.
</li>
<li>
<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
</li>
<li>
<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: one if that feels more comfortable.
</li>
</ul>
</div>
<!-- Friday Routine -->
<div align="center" class = "routine friday">
<h2>Friday</h2>
<ul>
<li>
<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your. and don't let your knees go over your toes during this lower-body move.
</li>
<li>
<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so your the bench, your feet flat on the floor.
</li>
<li>
<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you don't have a bench available, try a bent-over row.
</li>
<li>
<span>Lying Isometric Y</span>,—Hold for 30 seconds. Quick tip: You .
</li>
</ul>
</div>
<!-- Saturday Routine -->
<div align="center" class = "routine saturday">
<h2>Saturday</h2>
<ul>
<li>
<span>Bodyweight Squats</span>—15 reps.Quick tip: Get low, keep your chest up, and don't let your.
</li>
<li>
<span>Dumbbell Bench Press</span>—12 reps. Quick tip: Position yourself so. loor.
</li>
<li>
<span>Dumbbell Row</span>—12 reps each side. Quick tip: If you, try a bent-over row.
</li>
<li>
<span>Lying Isometric Y</span>,—Hold for 30 seconds. You can keep your legs on the ground.
</li>
</ul>
</div>
<div>
</div>
</div>