在较大的屏幕上显示行中的弹性项目，但在较小的屏幕上垂直堆叠

时间：2016-05-22 20:43:38

标签： jquery html css css3 flexbox

我正在为我的客户创建一个简单的主页。我使用flex-box来布局页面上的主要内容。我有2 div.container个，每个img个。{/ p>

在桌面视图中，我希望2 div.container显示内联，但当网站处于移动视图时，我希望它们显示为堆叠。

我还希望其余内容保持堆叠状态，无论它是什么视图。

我如何做到这一点？

function setHeight() {
	$('.img-c').css('height', $('.img-c').innerWidth());
}

setInterval(setHeight, 10);
:root {
  background: #fff;
}

#logo {
  display: block;
  margin: auto;
  width: 200px;
  text-align: center;
}

nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  background: #0a0;
  color: #fff;
  font-size: 1.5rem;
  font-family: 'Segoe UI', sans-serif;
}

li.selected {
  color: orange;
}

nav ul li:hover {
  color: springgreen;
  cursor: pointer;
}

nav ul li.selected:hover {
  color: #ff7700;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}

main p {
  text-align: center;
  max-width: 80%;
  font-size: 1.5rem;
  font-family: 'Segoe UI';
}

main p:nth-of-type(3) {
  font-weight: bold;
}

main hr {
  width: 100%;
  background: #0a0;
  height: 1px;
}

.img-c {
  width: 20%;
  background-color: #000;
  max-width: 200px;
  min-width: 100px;
}

@media screen and (max-width: 416px) {
  #bottom {
    display: block;
    order: 1;
  }
  
  .img-c {
    width: 50%;
  }
}

@media screen and (max-width: 358px) {
  nav ul {
    flex-direction: column;
    padding: 0;
  }
  
  nav ul li {
    width: 100%;
    text-align: center;
  }
  
  nav ul li:nth-child(2n) {
    background: #0c0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/CompImmer_logo_final_web4.png" id="logo" alt="logo"/>
  <nav>
  <ul>
    <li class="selected">Home</li>
    <li>About</li>
    <li>Classes</li>
    <li>Jobs</li>
  </ul>
  </nav>
</header>
<main>
  <div class="container">
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/2.jpg" alt="img" class="img-c"/>
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/5.jpg" alt="img" class="img-c" style="background: magenta"/>
      </div>
       <div class="container">
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/1.jpg" alt="img" class="img-c"/>
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/4.jpg" alt="img" class="img-c" style="background: magenta"/>
    </div>
  <p>Are you looking for computer classes that go beyond the typical summer camp or one-day experience?</p>
  <hr/>
  <p>Does your child have an interest in coding or computer hardware and want to learn what to do next?</p>
  <hr/>
  <p>Computer Immersion has the answer!</p>
  <hr/>
  <p>We teach computer science and tech culture to children who are 12-18 years old. Our classes immerse students in a wide range of hardware and software related topics such as scripting, coding, “tech speak”, networking, and hardware.</p>
  <hr/>
  <p>Our classes are taught by instructors with real world industry experience and meet for 9-week sessions at locations convenient for you.</p>
  <hr/>
</main>

3 个答案:

答案 0 :(得分：1)

第1步：

  • 将所有四张图像包裹在一个弹性容器中。

    str

第2步：

  • 为较大的屏幕设置弹性项目的样式。

    <div id="container">
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/2.jpg" alt="img" class="img-c"/>
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/5.jpg" alt="img" class="img-c" style="background: magenta"/>
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/1.jpg" alt="img" class="img-c"/>
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/4.jpg" alt="img" class="img-c" style="background: magenta"/>
</div>

第3步

  • 为较小的屏幕设置弹性项目的样式。

    .container {
     display: flex;
     justify-content: space-around;
}

DEMO

答案 1 :(得分：0)

  • 用另一个div包装你的图像.container div e.x。：<div class="gallery">

  • 仅将flex属性添加到包装器div：

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

查看代码段： https://jsfiddle.net/warkentien2/3uavncu2/1/

奖励，请尝试以下Flexbox教程：
http://flexboxin5.com/
http://flexboxfroggy.com/

答案 2 :(得分：0)

您可以使用单个.container并将其转换为内联灵活框。

在img上设置的最小宽度可以是此容器的断点的X值，也可以在已设置的媒体查询中对其进行排序。

＆＃13;
＆＃13; 
function setHeight() {
  $('.img-c').css('height', $('.img-c').innerWidth());
}

setInterval(setHeight, 10);
＆＃13; 
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* seems redundant but necessary, not inherited from parent flexbox */
}
:root {
  background: #fff;
}
#logo {
  display: block;
  margin: auto;
  width: 200px;
  text-align: center;
}
nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  background: #0a0;
  color: #fff;
  font-size: 1.5rem;
  font-family: 'Segoe UI', sans-serif;
}
li.selected {
  color: orange;
}
nav ul li:hover {
  color: springgreen;
  cursor: pointer;
}
nav ul li.selected:hover {
  color: #ff7700;
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}
main p {
  text-align: center;
  max-width: 80%;
  font-size: 1.5rem;
  font-family: 'Segoe UI';
}
main p:nth-of-type(3) {
  font-weight: bold;
}
main hr {
  width: 100%;
  background: #0a0;
  height: 1px;
}
.img-c {
  width: 20%;
  background-color: #000;
  max-width: 200px;
  min-width: 100px;
}
@media screen and (max-width: 416px) {
  #bottom {
    display: block;
    order: 1;
  }
  .img-c {
    width: 50%;
  }
}
@media screen and (max-width: 358px) {
  nav ul {
    flex-direction: column;
    padding: 0;
  }
  nav ul li {
    width: 100%;
    text-align: center;
  }
  nav ul li:nth-child(2n) {
    background: #0c0;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/CompImmer_logo_final_web4.png" id="logo" alt="logo" />
  <nav>
    <ul>
      <li class="selected">Home</li>
      <li>About</li>
      <li>Classes</li>
      <li>Jobs</li>
    </ul>
  </nav>
</header>
<main>
  <div class="container">
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/2.jpg" alt="img" class="img-c" />
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/5.jpg" alt="img" class="img-c" style="background: magenta" />
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/1.jpg" alt="img" class="img-c" />
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/4.jpg" alt="img" class="img-c" style="background: magenta" />
  </div>
  <p>Are you looking for computer classes that go beyond the typical summer camp or one-day experience?</p>
  <hr/>
  <p>Does your child have an interest in coding or computer hardware and want to learn what to do next?</p>
  <hr/>
  <p>Computer Immersion has the answer!</p>
  <hr/>
  <p>We teach computer science and tech culture to children who are 12-18 years old. Our classes immerse students in a wide range of hardware and software related topics such as scripting, coding, “tech speak”, networking, and hardware.</p>
  <hr/>
  <p>Our classes are taught by instructors with real world industry experience and meet for 9-week sessions at locations convenient for you.</p>
  <hr/>
</main>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题