在宽度480-490宽度，div变得不对了，怎么回事
来源：3-4 主要内容1
海盗ty飞飞
2016-09-06
这是怎么回事？怎么修改
3回答
-
姜维
2016-09-07
初步看来代码没什么问题，你在这个宽度时，刷新一下看看还是这样么？chrome有时候在响应式调试，拖拉宽度的时候，可能会出现排版错乱，刷新一下会好。
00 -
海盗ty飞飞
提问者
2016-09-14
/***********
** 页面样式
***********/
/* ===========
基本默认值
=========== */
html {
font-size: 62.5%;
color: #222;
}
::selection {
background-color: #b3d4fc;
text-shadow: none;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
/* ===========
工具默认值
=========== */
.conter-block {
display: block;
margin-right: auto;
margin-left: auto;
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.text-right {
text-align: right !important;
}
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* ===============
浏览器更新提示
=============== */
.browserupgrade {
margin: 0;
padding: 1rem;
background: #cccccc;
}
/* ===============
自定义页面样式
=============== */
body {
font-size: 1.2rem;
line-height: 1.5;
background-color: #f7f7f7;
}
a {
color: #666;
text-decoration: none;
}
a:hover, a:active {
color: #0ae;
text-decoration: underline;
}
/* 网站头部 */
header {
width: 100%;
}
header .top {
line-height: 3rem;
padding: 0 1.5rem;
color: #fff;
background: #555;
border-bottom: 1px solid #ecc000;
}
header .top .tel {
float: left;
}
header .top ul {
text-align: right;
}
header .top ul li {
display: inline-block;
}
header .top ul li + li {
border-left: 1px solid #999;
margin-left: -6px;
}
header .top ul li a {
display: inline-block;
padding: 0 1.5rem;
color: #fff;
}
@media only screen and (max-width: 50em) {
header .top ul li a {
padding: 0 1rem;
}
}
@media only screen and (max-width: 30em) {
header .top .tel,
header .top ul li:nth-child(3),
header .top ul li:nth-child(4) {
display: none;
}
}
/* -- header main --*/
header .main {
padding: 0;
}
header .main .brand {
float: left;
padding: 1rem 1.5rem 0;
}
header .main ul {
text-align: right;
}
header .main ul li {
display: inline-block;
border-left: 1px solid #f0ede9;
margin-left: -6px;
}
header .main ul li a {
display: inline-block;
padding: 0 2.5rem;
line-height: 5.5rem;
font-size: 1.6rem;
font-weight: bold;
color: #7c7a65;
text-decoration: none;
}
header .main ul li a:hover,
header .main ul li a:active,
header .main ul li a:active {
color: #ffb300;
background-color: #f8f6f1;
}
@media only screen and (max-width: 50em) {
header .main .brand {
float: none;
display: block;
padding: 0;
margin: 1.5rem auto 0.5rem;
text-align: center;
}
header .main ul {
text-align: center;
}
header .main ul li {
border: none;
}
header .main ul li a {
padding: 0 1.5rem;
}
}
@media only screen and (max-width: 30em) {
header .main .brand {
line-height: 3rem;
}
header .main ul li:first-child {
display: none;
}
header .main ul li a {
font-weight: normal;
padding: 0 0.5rem;
}
}
/* 网站主要内容 */
.container {
width: 100%;
}
/* 交易信息 */
.transaction {
width: 100%;
background-color: #7c7365;
}
.trans-content {
max-width: 90%;
margin: 0 auto;
font-size: 1.5rem;
}
.trans-data {
float: left;
padding: 1rem;
text-align: left;
}
.trans-data span {
display: inline-block;
line-height: 3rem;
color: #fff;
}
.trans-data span.trans-money {
font-size: 2.2rem;
color: #ff9900;
letter-spacing: 3px;
margin: 0 1rem;
padding: 0 1rem;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 1px 2px 1px #333 inset;
}
.trans-report {
text-align: right;
}
.trans-report a {
display: inline-block;
padding: 1rem;
line-height: 3rem;
color: #fff;
}
@media only screen and (max-width: 50em) {
.trans-data {
padding: 1rem 0.5rem;
}
.trans-data span {
font-size: 1.2rem;
}
.trans-data span.trans-money {
font-size: 1.6rem;
margin: 0;
padding: 0;
letter-spacing: inherit;
box-shadow: none;
background: transparent;
}
.trans-report a {
font-size: 1.2rem;
}
}
@media only screen and (max-width: 30em) {
.transaction {
padding: 0.5rem 0;
}
.trans-data, .trans-report {
float: none;
text-align: center;
}
.trans-data, .trans-report a {
padding: 0;
}
}
/* 滚动广告 */
/* 平台特点 */
.feature {
width: 90%;
margin: 2rem auto;
font-size: 0;
}
.feature .item {
display: inline-block;
width: calc(33.33333% - 3rem);
padding: 1rem;
font-size: 1.4rem;
background-color: #FFFFFF;
box-shadow: 0 0 4px #ccc;
}
.feature .item + .item {
margin-left: 1.5rem;
}
.feature .item h3 {
display: inline-block;
width: 40%;
margin: 0;
padding: 0;
vertical-align: top;
font-size: 3.3rem;
text-align: center;
color: #ff9900;
}
.feature .item p {
display: inline-block;
width: 55%;
margin: 0;
padding: 0;
color: #999;
}
@media only screen and (min-width: 30.625em) and (max-width: 50em) {
.feature .item h3,
.feature .item p {
display: block;
width: 100%;
font-size: 2.6rem;
text-align: center;
}
.feature .item p {
font-size: 1.2rem;
}
}
@media only screen and (max-width: 30em) {
.feature {
width: 96%;
margin: 1rem auto;
}
.feature .item {
display: block;
width: auto;
}
.feature .item + .item {
margin: 1rem 0 0;
}
}
/* 最新公告 */
.notice {
width: 90%;
margin: 2rem auto;
font-size: 1.4rem;
line-height: 3rem;
background-color: #FFFFFF;
box-shadow: 0 0 4px #ccc;
}
.notice a {
float: left;
display: inline-block;
width: 70%;
margin-left: 2rem;
text-decoration: none;
}
.notice a:first-child {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.notice a:first-child:before {
content: '最新公告: \00a0\00a0';
color: #aaaaaa;
}
.notice a span {
color: #999999;
font-size: 1.2rem;
margin-right: 1rem;
}
.notice a.more {
float: right;
width: auto;
margin-right: 2rem;
color: #ff9900;
}
@media only screen and (max-width: 30em) {
.notice {
width: 96%;
margin: 1rem auto;
font-size: 1.2rem;
}
.notice a {
margin-left: 1rem;
}
.notice a span {
display: none;
}
}
/* 产品列表 */
.product {
width: 90%;
margin: 2rem auto;
font-size: 1.4rem;
background-color: #f5f9fa;
border-top: 2px solid #ff9900;
box-shadow: 0 0 4px #ccc;
}
.product h2 {
float: left;
width: 20%;
margin-top: 3rem;
text-align: center;
font-size: 2.4rem;
font-weight: normal;
color: #635c51;
}
.product h2 em {
display: block;
margin-top: 1rem;
font-size: 1.6rem;
}
.product h2 em:first-child {
margin-top: 4rem;
}
.product .product-content {
float: right;
width: 79.5%;
border-left: 1px solid #eee;
background-color: #FFFFFF;
}
.product .product-content .item {
width: 100%;
}
.product .product-content .item + .item {
border-top: 1px solid #eeeeee;
}
.product .product-content .item h3 {
float: left;
width: 30%;
margin: 1.5rem 0;
font-size: 1.4rem;
font-weight: normal;
text-align: center;
}
.product .product-content .item h3 em {
margin-right: 0.5rem;
font-size: 3.6rem;
font-style: normal;
color: #8b999d;
}
.product .product-content .item h3 i {
display: block;
font-size: 1.2rem;
font-style: normal;
color: #999999;
}
.product .product-content .item .info {
float: left;
width: 48%;
padding: 1rem;
border-left: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
font-size: 14px;
}
.product .product-content .item .info p {
float: left;
display: inline-block;
text-align: center;
width: 56%;
}
.product .product-content .item .info p:last-child {
width: 40%;
}
.product .product-content .item .info p span {
display: block;
font-size: 2.4rem;
color: #ff9900;
}
.product .product-content .item .info p span i {
font-size: .12rem;
font-style: normal;
color: #999999;
}
.product .product-content .item .buy {
float: left;
width: calc(22% - 4.4rem);
padding: 1rem;;
}
.product .product-content .item .buy a {
display: block;
width: 90%;
margin: 1.5rem auto;
max-width: 12rem;
line-height: 4rem;
text-align: center;
text-decoration: none;
color: #FFFFFF;
background-color: #ff9900;
border-radius: 5px;
}
.product .product-content .item .buy a:hover,
.product .product-content .item .buy a:active {
background-color: #ffc468;
}
.product .product-content .item .buy a.disabled {
background-color: #cccccc !important;
cursor: not-allowed;
}
@media only screen and (max-width: 50rem) {
.product h2 {
float: none;
width: 100%;
margin-top: 2rem;
font-size: 2.2rem;
}
.product h2 em:first-child {
margin-top: 0;
}
.product h2 em {
display: inline;
font-size: 1.2rem;
}
.product h2 em {
display: inline;
font-size: 1.2rem;
}
.product .product-content {
float: none;
width: 100%;
}
.product .product-content .item h3 {
margin-bottom: 0;
}
.product .product-content .item h3 em {
font-size: 2.4rem;;
}
.product .product-content .item .info {
padding: 1rem 1rem 0;
font-size: 1.2rem;
}
.product .product-content .item .info p span {
font-size: 2rem;
}
.product .product-content .item .buy a {
margin: 0.5rem auto;
}
}
@media only screen and (max-width: 30em) {
.product h2 em:first-child:before {
content: " ";
display: table;
}
.product .product-content .item h3 em {
font-size: 2rem;
margin-right: 0;
}
.product .product-content .item .info {
float: right;
width: 70%;
padding: 1rem 0;
border: none;
}
.product .product-content .item .info p span {
font-size: 1.8rem;
}
.product .product-content .item .buy {
clear: both;
float: none;
width: 100%;
padding: 1rem 0 2rem;
}
.product .product-content .item .buy a {
margin-top: 0;
max-width: 26rem;
}
}
/* 底部导航 */
.footer {
padding: 3rem 0;
background-color: #FFFFFF;
border-top: 2px solid #eeeeee;
}
.footer-content {
width: 90%;
margin: 0 auto;
}
.footer-content .brand {
float: left;
display: block;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: 20%;
height: 35px;
background: url("../img/logo@1x (1).png") no-repeat left;
background-size: 150px 35px;
}
.footer-content ul {
float: left;
width: 15%;
}
.footer-content ul li {
font-size: 1.4rem;
line-height: 2.4rem;
}
.footer-content ul li.title {
font-size: 1.6rem;
line-height: 3rem;
}
@media only screen and (max-width: 50rem) {
.footer-content .brand {
display: none;
}
.footer-content ul {
width: 20%;
}
.footer ul li {
font-size: 1.2rem;
line-height: 2rem;
}
.footer-content ul li.title {
font-size: 1.4rem;
line-height: 2.5rem;
}
}
@media only screen and (max-width: 30em) {
.footer-content {
width: 98%;
}
.footer-content ul li.title {
font-size: 1.2rem;
line-height: 2rem;
}
}
/* 网站底部 */
footer {
width: 100%;
padding: 3rem 0 5rem;
background-color: #ededed;
}
footer ul {
text-align: center;
}
footer ul li {
display: inline-block;
}
footer ul li .icon {
display: inline-block;
text-indent: -999rem;
margin-right: 1.5rem;
background: url(https://i.alipayobjects.com/e/201307/jebmKcbrh.png) no-repeat;
background-size: 466px 447px;
overflow: hidden;
}
footer ul li .icon-zfywxkz {
width: 38px;
height: 27px;
background-position: -369px -45px;
}
footer ul li .icon-pcirk {
width: 78px;
height: 27px;
background-position: -100px -96px;
}
footer ul li .icon-visayz {
width: 36px;
height: 27px;
background-position: -426px -90px;
}
footer ul li .icon-vsjmfw {
width: 63px;
height: 27px;
margin-left: 13px;
background-position: -401px -186px;
}
footer ul li .icon-wlgs {
width: 22px;
height: 27px;
background-position: -48px -48px;
}
footer ul li .icon-rzcx {
width: 75px;
height: 27px;
background-position: 0 -320px;
}
footer ul li .icon-gs {
width: 30px;
height: 30px;
margin-right: 0;
background: url(https://os.alipayobjects.com/rmsportal/lybcjqloSPjMAFg.png) no-repeat;
background-size: 30px;
}
footer p {
text-align: center;
color: #999999;
}
/* ==============
打印样式
============== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(href) ")";
}
/*
*使用#和javascript的超链接不打印href
*/
a[href^='#']:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}00 -
海盗ty飞飞
提问者
2016-09-14
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge"><!--ie=edge:表示强制以最新的IE浏览器模式渲页面-->
<title>理财网站</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!--[if lte IE 8]>
<p>
您的浏览器版本老的可笑，请到<a href="http://browsehappy.com">这里</a>更新,以获取最佳的体验
</p>
<![endif]-->
<header>
<nav class="top">
<span class="tel">理财热线：400-888-8888</span>
<ul>
<li><a href="#">登录</a></li>
<li><a href="#">快速注册</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">帮助</a></li>
<li><a href="#">快速下载APP</a></li>
</ul>
</nav>
<nav class="main">
<a href="#" class="brand"><img src="img/logo@1x.png" alt="回到首页"></a>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">理财频道</a></li>
<li><a href="#">投资频道</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#">安全保障</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="transaction clearfix">
<div class="trans-content">
<div class="trans-data">
<span>平台累计成交金额</span>
<span class="trans-money">19888</span>
<span>万元</span>
</div>
<div class="trans-data">
<span>过去7日成交金额</span>
<span class="trans-money">1888</span>
<span>万元</span>
</div>
<div class="trans-report">
<a href="#">查看平台运营报告</a>
</div>
</div>
</div>
<div class="ad">
<div class="owl-carousel owl-theme">
<div class="item">
<picture>
<source srcset="img/ad001-l.png" media="(min-width:50em)">
<source srcset="img/ad001-m.png" media="(min-width:30em)">
<img src="img/ad001.png" alt="2015年度报告">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad002-l.png" media="(min-width:50em)">
<source srcset="img/ad002-m.png" media="(min-width:30em)">
<img src="img/ad002.png" alt="新年红包">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad003-l.png" media="(min-width:50em)">
<source srcset="img/ad003-m.png" media="(min-width:30em)">
<img src="img/ad003.png" alt="新手秘籍">
</picture>
</div>
</div>
</div>
<section class="feature">
<div class="item">
<h3>安全</h3>
<p>国家AAA信用平台<br>银行资金托管<br>上市公司背景保证</p>
</div>
<div class="item">
<h3>权威</h3>
<p>中央电视台推荐<br>互联网百强企业<br>标准起草单位</p>
</div>
<div class="item">
<h3>省心</h3>
<p>100元起投<br>用户利益保障机制<br>保险公司承保</p>
</div>
</section>
<section class="notice clearfix">
<a href="#"><span>2015-12-31</span>元旦期间业务受理及值班公告元旦期间业务受理及值班公告元旦期间业务受理及值班公告</a>
<a href="#" class="more">更多公告</a>
</section>
<section class="product clearfix">
<h2>
固定期限产品
<em>甄选优质基金</em>
<em>省时省力</em>
<em>坐等收益</em>
</h2>
<div class="product-content">
<div class="item clearfix">
<h3><em>3</em>个月</h3>
<div class="info">
<p>约定年化收益率:<span class="year-rate">3.50%<i>起</i></span></p>
<p>总成交金额:<span class="money">1880<i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
<div class="item clearfix">
<h3><em>3</em>个月</h3>
<div class="info">
<p>约定年化收益率:<span class="year-rate">3.50%<i>起</i></span></p>
<p>总成交金额:<span class="money">1880<i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
<div class="item clearfix">
<h3><em>3</em>个月</h3>
<div class="info">
<p>约定年化收益率:<span class="year-rate">3.50%<i>起</i></span></p>
<p>总成交金额:<span class="money">1880<i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
<div class="item clearfix">
<h3><em>3</em>个月</h3>
<div class="info">
<p>约定年化收益率:<span class="year-rate">3.50%<i>起</i></span></p>
<p>总成交金额:<span class="money">1880<i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
<div class="item clearfix">
<h3><em>3</em>个月</h3>
<div class="info">
<p>约定年化收益率:<span class="year-rate">3.50%<i>起</i></span></p>
<p>总成交金额:<span class="money">1880<i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
</div>
</section>
<section class="product clearfix">
<h2>
固定期限产品
<em>甄选优质基金</em>
<em>省时省力</em>
<em>坐等收益</em>
</h2>
<div class="product-content clearfix">
<div class="item clearfix">
<h3><em>3</em>个月</h3>
<div class="info">
<p>约定年化收益率:<span class="year-rate">3.50%<i>起</i></span></p>
<p>总成交金额:<span class="money">1880<i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
<div class="item clearfix">
<h3><em>3</em>个月</h3>
<div class="info">
<p>约定年化收益率:<span class="year-rate">3.50%<i>起</i></span></p>
<p>总成交金额:<span class="money">1880<i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
<div class="item clearfix">
<h3><em>3</em>个月</h3>
<div class="info">
<p>约定年化收益率:<span class="year-rate">3.50%<i>起</i></span></p>
<p>总成交金额:<span class="money">1880<i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
<div class="item clearfix">
<h3><em>3</em>个月</h3>
<div class="info">
<p>约定年化收益率:<span class="year-rate">3.50%<i>起</i></span></p>
<p>总成交金额:<span class="money">1880<i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
<div class="item clearfix">
<h3><em>3</em>个月</h3>
<div class="info">
<p>约定年化收益率:<span class="year-rate">3.50%<i>起</i></span></p>
<p>总成交金额:<span class="money">1880<i>万元</i></span></p>
</div>
<div class="buy">
<a href="#">购买</a>
</div>
</div>
</div>
</section>
<nav class="footer">
<div class="footer-content clearfix">
<p class="brand"></p>
<ul>
<li class="title">关于我们</li>
<li><a href="#">公司介绍</a></li>
<li><a href="#">业务模式</a></li>
<li><a href="#">合作机构</a></li>
<li><a href="#">服务协议</a></li>
</ul>
<ul>
<li class="title">风险防范</li>
<li><a href="#">账户安全</a></li>
<li><a href="#">安全保障</a></li>
</ul>
<ul>
<li class="title">理财产品</li>
<li><a href="#">固定期限</a></li>
<li><a href="#">债权/散标</a></li>
</ul>
<ul>
<li class="title">交易帮助</li>
<li><a href="#">购买</a></li>
<li><a href="#">赎回</a></li>
<li><a href="#">提现</a></li>
</ul>
<ul>
<li class="title">机构服务</li>
<li><a href="#">机构中心</a></li>
<li><a href="#">合作联系</a></li>
</ul>
</div>
</nav>
</div>
<footer>
<ul>
<li><span class="icon icon-zfywxkz">支付业务许可证</span></li>
<li><span class="icon icon-pcirk">PCI认证</span></li>
<li><span class="icon icon-visayz">Visa 验证</span></li>
<li><span class="icon icon-vsjmfw">VerSign加密服务</span></li>
<li><span class="icon icon-wlgs">网络工商</span></li>
<li><span class="icon icon-rzcx">电子商务协会认证信用</span></li>
<li><span class="icon icon-gs">北京工商</span></li>
</ul>
<p>北京某互联网金融公司 版权所有 ® 2015-2016</p>
</footer>
<script src="js/vendor/Respond.js"></script>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/picturefill.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>00 -
海盗ty飞飞
提问者
2016-09-08
刷新了，还是错乱，不知道哪的问题
022016-09-19
相似问题