CSS的响应列无法正常工作

时间：2017-11-17 12:49:31

标签： html css

如果我缩小宽度（移动设备），为什么图像不会自动关闭？我的@media或其他什么地方有问题吗？

*我试图让它像bootstrap列一样响应。我把它划分为：第二部分和第三部分，但是第三部分没有响应地下降，即使我已经调整了第三部分而且第三部分仅在最小宽度：601px的设备中实现。请帮忙。

提前谢谢。* 

html {  
   box-sizing : border-box;
}*,
*:before,
*:after {  
   box-sizing : inherit;
}

html {  
   -ms-text-size-adjust : 100%;
   -webkit-text-size-adjust : 100%;
   overflow-x : hidden;
   min-height: 100%;
   min-width: 100%;
}

html, body {  
   font-family : Verdana, sans-serif;
   font-size : 15px;
   line-height : 1.5;
}

body {  
   margin : 0;
}

a {  
   background-color : transparent;
   -webkit-text-decoration-skip : objects;
   color : inherit;
}

a : active, a : hover {  
   outline-width : 0;
}

h1 {  
   font-size : 36px;
}

h2 {  
   font-size : 30px;
}

h3 {  
   font-size : 24px;
}

h4 {  
   font-size : 20px;
}

h5 {  
   font-size : 18px;
}

h5.italic {  
   font-style : italic;
}

h6 {  
   font-size : 16px;
}

p {
   color : #757575!important;
}

p.italic {
    font-style : italic;
}

@media (min-width : 993px) {  
   .hide-large {  
      display : none!important;
   }
}

@media (max-width : 992px) and (min-width : 601px) {  
   .hide-medium {  
      display : none!important;
   }
}

@media (max-width:600px){  
   .hide-small {  
      display:none!important;
   } .content-main {  
      flex-direction: row;
   }
}

@media (min-width:601px){  
   .quarter {  
      width : 24.99999%;
   } .third {  
      width : 33.33333%;
   } .twothird {  
      width : 66.66666%;
   }
}

@media (max-width:992px){  
   .content-main {  
      margin-left : 0!important;
      margin-right : 0!important;
   }
}

img {  
   border-style : none;
}

.theme {
   color : #fff!important;
   background-color : #000000!important;
}

.theme-l1 {
   color : #fff!important;
   background-color : #333333!important;
}

.top,.bottom {  
   position : fixed;
   width : 100%;
   z-index : 1;
}

.top {  
   top : 0;
}

.bottom {  
   bottom : 0;
}

.bar {  
   width : 100%;
   overflow : hidden;
}

.container, .panel {  
   padding : 0.01em 16px;
   min-height: 50px;
   overflow: hidden;
}

.panel {  
   margin-top : 16px;
   margin-bottom : 16px;
}

.bar .bar-item {  
   padding : 8px 16px;
   float : left;
   width : auto;
   border : none;
   outline : none;
   display : block;
}

.bar .button {  
   white-space : normal;
}

.bar-block .bar-item{  
   width : 100%;
   display : block;
   padding : 8px 16px;
   text-align : left;
   border : none;
   outline : none;
   white-space : normal;
   float : none;
}

.button {  
   -webkit-touch-callout : none;
   -webkit-user-select : none;
   -khtml-user-select : none;
   -moz-user-select : none;
   -ms-user-select : none;
   user-select : none;  
   border : none;
   display : inline-block;
   outline : 0;
   padding : 8px 16px;
   vertical-align : middle;
   overflow : hidden;
   text-decoration : none;
   color : inherit;
   background-color : inherit;
   text-align : center;
   cursor : pointer;
   white-space : nowrap;
}

.button : hover {  
   color : #000!important;
   background-color : #ccc!important;
}

.button : disabled{  
   cursor : not-allowed;
   opacity : 0.3;
}

.teal {  
   color : #fff!important;
   background-color : #009688!important;
}

.teal, .hover-teal : hover {  
   color : #fff!important;
   background-color : #009688!important;
}

.white, .hover-white : hover {  
   color : #000!important;
   background-color : #fff!important;
}

.margin-top {  
   margin-top : 16px!important;
}

.margin-bottom {  
   margin-bottom : 16px!important;
}

.margin-left {  
   margin-left : 16px!important;
}

.margin-right {  
   margin-right : 16px!important;
}

.right {  
   float : right!important;
}

.display-container {  
   position : relative;
}

.animate-opacity {  
   animation : opac 0.8s;
} @keyframes opac {  
   from {  
      opacity : 0;
   } to {  
      opacity : 1;
   }
}

.xlarge {  
   font-size : 24px!important;
}

.xxlarge{  
   font-size : 36px!important;
}

.left-align {  
   text-align : left!important;
}

.center {  
   text-align : center!important;
}

.padding-65 {  
   padding-top : 65px!important;
   padding-bottom : 65px!important;
}

.padding-64 {  
   padding-top : 64px!important;
   padding-bottom : 64px!important;
}

.light-grey, .hover-light-grey : hover {  
   color : #000!important;
   background-color : #f1f1f1!important;
}

.bottombar {  
   border-bottom : 6px solid #ccc!important;
}

.topbar {  
   border-top : 6px solid #ccc!important;
}

.padding-16 {  
   padding-top : 16px!important;
   padding-bottom : 16px!important;
}

.padding {  
   padding : 8px 16px!important;
}
.quarter, .third,
.twothird {  
   float : left;
   width : 100%;
}

.quarter {  
   width : 24.99999%;
}

.third {  
   width : 33.33333%;
}

.twothird {  
   width : 66.66666%;
}

.row-padding,
.row-padding > .quarter,
.row-padding > .third,
.row-padding > .twothird {  
   padding : 0 8px;
}

.content{  
   max-width : 980px;
   margin : auto;
}

.hide{  
   display : none!important;
}

.show {  
   display : block!important;
}

.container : after, .container : before,
.panel : after, .panel : before,
.row-padding : after, .row-padding : before,
.bar : before, .bar : after {  
   content : "";
   display : table;
   clear : both;
}

.circle {  
   border-radius : 50%;
}

.content-main {
   max-width : 1020px;
   margin : auto;
   min-height: 50px;
   overflow: hidden;
}

.leftbar {  
   border-left : 6px solid #ccc!important;
}

.serif {  
   font-family : serif;
}

.karma {
   font-family :"Karma", sans-serif;
}
<div class="container row-padding padding-64" id="about">
		<div class="content">
			<div class="twothird">
			<h1 class="xlarge bottombar padding-16">About</h1>	
			<h5 class="padding-32">Between art and craft, lies The Chino A Serie.</h5>

		    <p class="padding-32">Discover brand new wave of chinoserie inside us, whether you just want an instagenic background for your dayout or appreciate a new beauty, history and art while you sip your Macadamia Coffee or chop the Feast Roasta Lamb. We present you "turn-back time" experience through walking corridor gallery with theme from contemporer to ancient baroque style. Oh, once more! Check out the fusion tile work in the floor of the cafe.</p>

		    <h5 class="padding-32 italic">Entre art et artisanat, se trouve La  Chino A Série.</h5>
		    
		    <p class="padding-32 italic">Découvrez la toute nouvelle vague de chinoserie en nous, que vous souhaitiez simplement un arrière-plan instagène pour votre journée ou apprécier une nouvelle beauté, histoire et art pendant que vous sirotez votre Macadamia Coffee ou que vous coupez l'agneau Roasta Feast. Nous vous présentons l'expérience du temps de retour à travers la galerie de couloir à pied avec le thème du style contemporain à l'ancien style baroque. Oh, encore une fois! Découvrez le travail de carreaux de fusion dans le plancher du café.</p><br>
			</div><br><br>
			<div class="third center content padding-64">
				<img src="images/TealBird.jpg" alt="chinoiserie" style="width : 90%">
				<div class="panel">
					<p><i class="fa fa-quote-left xxlarge"></i><br>
						<i class="xlarge serif">White becomes teal, Birds free from the tale.
						</i><br>
						<i class="fa fa-quote-right xxlarge"></i>
					</p>
				</div>
			</div>
    	</div>
	</div>

3 个答案:

答案 0 :(得分：1)

因为默认宽度是100％而三个宽度是66.66％，而第三个宽度是33.33％。元素将填满空白区域。您可以做的是将父宽度设置为66.66％，或者为所有三个子元素提供100％的宽度（因此它会自动将所有内容推到彼此之下）。

答案 1 :(得分：1)

您的媒体查询似乎不错，最大宽度：600px我添加了一个明确的：两者都是第三类：

@media (max-width:600px){  
   .hide-small {  
      display:none!important;
   } .content-main {  
      flex-direction: row;
   }
  .third {
    clear: both
  }
}

答案 2 :(得分：1)

您可以将clear: both添加到.third css类max-width:600px

  

clear属性指定元素浮动的哪一侧   元素不允许浮动

我建议重新设计html结构（看起来太复杂）或者如果可以的话使用像bootstrap这样的框架。

＆＃13;
＆＃13; 
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  min-height: 100%;
  min-width: 100%;
}

html,
body {
  font-family: Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

body {
  margin: 0;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  color: inherit;
}

a: active,
a: hover {
  outline-width: 0;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 18px;
}

h5.italic {
  font-style: italic;
}

h6 {
  font-size: 16px;
}

p {
  color: #757575!important;
}

p.italic {
  font-style: italic;
}

@media (min-width: 993px) {
  .hide-large {
    display: none!important;
  }
}

@media (max-width: 992px) and (min-width: 601px) {
  .hide-medium {
    display: none!important;
  }
}

@media (max-width:600px) {
  .hide-small {
    display: none!important;
  }
  .content-main {
    flex-direction: row;
  }
  .third {
    clear: both;
  }
}

@media (min-width:601px) {
  .quarter {
    width: 24.99999%;
  }
  .third {
    width: 33.33333%;
  }
  .twothird {
    width: 66.66666%;
  }
}

@media (max-width:992px) {
  .content-main {
    margin-left: 0!important;
    margin-right: 0!important;
  }
}

img {
  border-style: none;
}

.theme {
  color: #fff!important;
  background-color: #000000!important;
}

.theme-l1 {
  color: #fff!important;
  background-color: #333333!important;
}

.top,
.bottom {
  position: fixed;
  width: 100%;
  z-index: 1;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

.bar {
  width: 100%;
  overflow: hidden;
}

.container,
.panel {
  padding: 0.01em 16px;
  min-height: 50px;
  overflow: hidden;
}

.panel {
  margin-top: 16px;
  margin-bottom: 16px;
}

.bar .bar-item {
  padding: 8px 16px;
  float: left;
  width: auto;
  border: none;
  outline: none;
  display: block;
}

.bar .button {
  white-space: normal;
}

.bar-block .bar-item {
  width: 100%;
  display: block;
  padding: 8px 16px;
  text-align: left;
  border: none;
  outline: none;
  white-space: normal;
  float: none;
}

.button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: none;
  display: inline-block;
  outline: 0;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.button: hover {
  color: #000!important;
  background-color: #ccc!important;
}

.button: disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.teal {
  color: #fff!important;
  background-color: #009688!important;
}

.teal,
.hover-teal: hover {
  color: #fff!important;
  background-color: #009688!important;
}

.white,
.hover-white: hover {
  color: #000!important;
  background-color: #fff!important;
}

.margin-top {
  margin-top: 16px!important;
}

.margin-bottom {
  margin-bottom: 16px!important;
}

.margin-left {
  margin-left: 16px!important;
}

.margin-right {
  margin-right: 16px!important;
}

.right {
  float: right!important;
}

.display-container {
  position: relative;
}

.animate-opacity {
  animation: opac 0.8s;
}

@keyframes opac {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.xlarge {
  font-size: 24px!important;
}

.xxlarge {
  font-size: 36px!important;
}

.left-align {
  text-align: left!important;
}

.center {
  text-align: center!important;
}

.padding-65 {
  padding-top: 65px!important;
  padding-bottom: 65px!important;
}

.padding-64 {
  padding-top: 64px!important;
  padding-bottom: 64px!important;
}

.light-grey,
.hover-light-grey: hover {
  color: #000!important;
  background-color: #f1f1f1!important;
}

.bottombar {
  border-bottom: 6px solid #ccc!important;
}

.topbar {
  border-top: 6px solid #ccc!important;
}

.padding-16 {
  padding-top: 16px!important;
  padding-bottom: 16px!important;
}

.padding {
  padding: 8px 16px!important;
}

.quarter,
.third,
.twothird {
  float: left;
  width: 100%;
}

.quarter {
  width: 24.99999%;
}

.third {
  width: 33.33333%;
}

.twothird {
  width: 66.66666%;
}

.row-padding,
.row-padding>.quarter,
.row-padding>.third,
.row-padding>.twothird {
  padding: 0 8px;
}

.content {
  max-width: 980px;
  margin: auto;
}

.hide {
  display: none!important;
}

.show {
  display: block!important;
}

.container: after,
.container: before,
.panel: after,
.panel: before,
.row-padding: after,
.row-padding: before,
.bar: before,
.bar: after {
  content: "";
  display: table;
  clear: both;
}

.circle {
  border-radius: 50%;
}

.content-main {
  max-width: 1020px;
  margin: auto;
  min-height: 50px;
  overflow: hidden;
}

.leftbar {
  border-left: 6px solid #ccc!important;
}

.serif {
  font-family: serif;
}

.karma {
  font-family: "Karma", sans-serif;
}
＆＃13; 
<div class="container row-padding padding-64" id="about">
  <div class="content">
    <div class="twothird">
      <h1 class="xlarge bottombar padding-16">About</h1>
      <h5 class="padding-32">Between art and craft, lies The Chino A Serie.</h5>

      <p class="padding-32">Discover brand new wave of chinoserie inside us, whether you just want an instagenic background for your dayout or appreciate a new beauty, history and art while you sip your Macadamia Coffee or chop the Feast Roasta Lamb. We present you "turn-back
        time" experience through walking corridor gallery with theme from contemporer to ancient baroque style. Oh, once more! Check out the fusion tile work in the floor of the cafe.</p>

      <h5 class="padding-32 italic">Entre art et artisanat, se trouve La Chino A Série.</h5>

      <p class="padding-32 italic">Découvrez la toute nouvelle vague de chinoserie en nous, que vous souhaitiez simplement un arrière-plan instagène pour votre journée ou apprécier une nouvelle beauté, histoire et art pendant que vous sirotez votre Macadamia Coffee ou que vous coupez
        l'agneau Roasta Feast. Nous vous présentons l'expérience du temps de retour à travers la galerie de couloir à pied avec le thème du style contemporain à l'ancien style baroque. Oh, encore une fois! Découvrez le travail de carreaux de fusion dans
        le plancher du café.</p><br>
    </div><br><br>
    <div class="third center content padding-64">
      <img src="images/TealBird.jpg" alt="chinoiserie" style="width : 90%">
      <div class="panel">
        <p><i class="fa fa-quote-left xxlarge"></i><br>
          <i class="xlarge serif">White becomes teal, Birds free from the tale.
						</i><br>
          <i class="fa fa-quote-right xxlarge"></i>
        </p>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题