【发布时间】:2017-07-07 08:26:52
【问题描述】:
我有 6 个 div 浮动权限。我使用百分比来表示响应,连续 3 个 div 共享 33.3%。在我的笔记本电脑分辨率下工作得很好——但是当我调整屏幕的大小时,divs 开始崩溃。似乎无法找到解决方法,如果有人愿意解释为什么会这样,尽管百分比是对我认为个人视口的参考?
.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>
【问题讨论】:
-
仍然没有解决这个问题。