根据分辨率折叠div

Question

我有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>

Answer 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>