如何制作如图所示的3列响应式设计？
如何制作如图所示的3列响应式设计？
提问于 2018-06-03 00:04:59
我的布局有一个问题：
<!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...
回答 1
Stack Overflow用户
发布于 2018-06-03 00:31:13
对于您想要的输出，display:flex是最佳解决方案。尝试将您的CSS代码更改为如下所示。
* {
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%;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50658732
复制相关文章
相似问题
腾讯云开发者
