我的布局有一个问题:
<!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...
发布于 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%;
}
}
https://stackoverflow.com/questions/50658732
复制相似问题