首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何制作如图所示的3列响应式设计?

如何制作如图所示的3列响应式设计?
EN

Stack Overflow用户
提问于 2018-06-03 00:04:59
回答 1查看 41关注 0票数 1

我的布局有一个问题:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    font-family: lato;
    width: 100%;
  }

  .header {
    background: #111;
    padding: 30;
    position: fixed;
    width: 100%;
  }

  .col1 {
    float: left;
    width: 24%;
    margin-right: 1%;
    background: #9abb28;
  }

  .col2 {
    float: left;
    width: 49%;
    background: #ff7878;
    margin-right: 1%;
  }

  .col3 {
    background: #0d953c;
    float: left;
    width: 25%;
  }

  .fix {
    overflow: hidden;
  }

  .con {
    width: 100%;
  }
  @media screen and (max-width:700px){
    .col2{
      width: 100%;
      float: none;
    }
    .col1{
      width:50%;
    }
    .col3{
      width:50%;
      float: right;
    }
  }
</style>

<body>
  <div class="fix header"></div>
  <div class="fix con">
    <div class="fix col1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nobis perferendis accusantium velit totam soluta corporis, quisquam magnam eligendi non aliquid maiores nemo commodi dicta sequi minima molestias. Animi minus error doloribus facere,
      aspernatur, nam porro. Aperiam praesentium nulla repudiandae, natus labore. Quos deleniti odit fugiat nisi, dignissimos, aspernatur consequuntur, expedita aperiam itaque eveniet explicabo repellendus? Commodi quidem dolorem maxime iste blanditiis
      velit illum dolorum cupiditate nemo, tempora ad tenetur quibusdam necessitatibus ipsum alias asperiores illo culpa! Nobis in, rem nemo magnam facilis aspernatur sit eum ea! Officia, ut, voluptas!</div>
    <div class="fix col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nobis perferendis accusantium velit totam soluta corporis, quisquam magnam eligendi non aliquid maiores nemo commodi dicta sequi minima molestias. Animi minus error doloribus facere,
      aspernatur, nam porro. Aperiam praesentium nulla repudiandae, natus labore. Quos deleniti odit fugiat nisi, dignissimos, aspernatur consequuntur, expedita aperiam itaque eveniet explicabo repellendus? Commodi quidem dolorem maxime iste blanditiis
      velit illum dolorum cupiditate nemo, tempora ad tenetur quibusdam necessitatibus ipsum alias asperiores illo culpa! Nobis in, rem nemo magnam facilis aspernatur sit eum ea! Officia, ut, voluptas!</div>
    <div class="fix col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nobis perferendis accusantium velit totam soluta corporis, quisquam magnam eligendi non aliquid maiores nemo commodi dicta sequi minima molestias. Animi minus error doloribus facere,
      aspernatur, nam porro. Aperiam praesentium nulla repudiandae, natus labore. Quos deleniti odit fugiat nisi, dignissimos, aspernatur consequuntur, expedita aperiam itaque eveniet explicabo repellendus? Commodi quidem dolorem maxime iste blanditiis
      velit illum dolorum cupiditate nemo, tempora ad tenetur quibusdam necessitatibus ipsum alias asperiores illo culpa! Nobis in, rem nemo magnam facilis aspernatur sit eum ea! Officia, ut, voluptas!</div>
  </div>    
 </body>    
</html>

当涉及到这个设计,这是不可能的,我不可能对这个响应式的这些项目。

我可以做电脑的布局,但不能做平板电脑的样式。

我如何让这个设计响应式的呢?

下图是HTML和CSS...

EN

回答 1

Stack Overflow用户

发布于 2018-06-03 00:31:13

对于您想要的输出,display:flex是最佳解决方案。尝试将您的CSS代码更改为如下所示。

代码语言:javascript
复制
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: lato;
  width: 100%;
}

.header {
  background: #111;
  padding: 30;
  position: fixed;
  width: 100%;
}

.col1 {
  float: left;
  width: 24%;
  background: #9abb28;
}

.col2 {
  float: left;
  width: 49%;
  background: #ff7878;
}

.col3 {
  background: #0d953c;
  float: left;
  width: 25%;
}

.fix {
  overflow: hidden;
}

.con {
  width: 100%;
}

.con {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .col2 {
    order: 1;
    flex-basis: 100%;
  }
  .col1 {
    order: 2;
    flex-basis: 50%;
  }
  .col3 {
    order: 3;
    flex-basis: 50%;
  }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50658732

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档