【问题标题】:Collapsing divs depending on resolution根据分辨率折叠 div
【发布时间】: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>

【问题讨论】:

  • 仍然没有解决这个问题。

标签: html css


【解决方案1】:

我不太确定你所说的崩溃是什么意思,但我认为这应该可以解决它。您可以根据设备宽度激活不同的 CSS(请参阅here)。我在下面做了这个。因此,当宽度低于 500 像素时,每行仅显示一个锻炼。否则,每行将有三个,就像目前一样。随意玩弄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>

【讨论】:

  • 嗨,丹,感谢您的回复。虽然这个解决方案有效,但我还是决定使用“flex”。它比我原来的方法简单得多,并且非常适合响应性:)
  • 事实上,丹,运行了你的 sn-p,它似乎是我最初的问题帖子的反应。明天早上我再看看:)
  • 嘿,James,只是想确保您知道,IE9 及以下版本不支持 flex 属性,IE10 及以下版本不支持没有供应商前缀。根据您的项目的用途,这对您来说可能很重要,也可能无关紧要。
  • 很高兴我能帮上忙!我对此进行了编辑以使其工作得更好一些。现在在较小的分辨率上应该更具可读性,节省空间。
猜你喜欢
  • 2015-08-28
  • 2019-05-04
  • 2017-04-16
  • 1970-01-01
  • 1970-01-01
  • 2014-01-26
  • 1970-01-01
  • 2022-10-07
  • 2011-11-16
相关资源
最近更新 更多