Question

我目前在我的服务页面www.a1cleaningservicesnw.com上的网站上工作，我有以下代码。

    <div class="container">
   <div class="column-center" align="center"><h1>Carpet and upholstery cleaning</h1><br><br>
<div align="center"> <img src="upholstery-cleaning.jpg" alt="Carpet and upholstery cleaning" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>


   <div class="column-left" align="center"><h1>End of tenancy cleans</h1><br><br>
<div align="center"> <img src="End-of-tenancy.jpg" alt="End of tenancy" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>


   <div class="column-right" align="center"><h1>Rug cleaning</h1><br><br>
<div align="center"> <img src="rug-cleaning.jpg" alt="Rug cleaning" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>
</div>
<div style="clear:both"></div>
<hr>

用这个css

.column-left{ float: left; width: 33%; } .column-right{ float: right; width: 33%; 4}.column-center{ display: inline-block; width: 33%; }

我想知道的是：而不是在所有版本和设备上显示3列。当屏幕尺寸对于3列布局而言太小时。如何让它将其显示为单列？一个在另一个之下？如果没有列标签，我不想再把它全部拿走。

请帮忙

谢谢。凯文。

Answer 1

您可以添加媒体查询，将指定屏幕宽度范围的列宽更改为100%。

@media (max-width: 700px) {
  .column-left,
  .column-center,
  .column-right {
    width: 100%;
  }
}

参考：CSS media queries

Answer 2

响应下面的ipad

＆＃13;

.column-left{ float: left; width: 33%; } 
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }

@media (max-width: 767px) {
.column-left{ float: left; width: 100%; } 
.column-right{ float: right; width: 100%; }
.column-center{ display: inline-block; width: 100%; }  
}

＆＃13;

<div class="container">
   <div class="column-center" align="center"><h1>Carpet and upholstery cleaning</h1><br><br>
<div align="center"> <img src="upholstery-cleaning.jpg" alt="Carpet and upholstery cleaning" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>


   <div class="column-left" align="center"><h1>End of tenancy cleans</h1><br><br>
<div align="center"> <img src="End-of-tenancy.jpg" alt="End of tenancy" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>


   <div class="column-right" align="center"><h1>Rug cleaning</h1><br><br>
<div align="center"> <img src="rug-cleaning.jpg" alt="Rug cleaning" width="200" height="150"></div><br><br>

<a href="#" style="color: #0b739e; font-size: 15px;">Read More...</a>
</div>
</div>
<div style="clear:both"></div>
<hr>

＆＃13;

Answer 3

@media only screen and ( max-width: 479px ) {
   .column-left, .column-center, .column-right {
     width: 100%;
  }
}
@media only screen and ( max-width: 768px) {
   .column-left, .column-center, .column-right {
     width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
   .column-left, .column-center, .column-right {
     width: 100%;
  }
}

希望这是有帮助的

Answer 4

您应该尝试使用Bootstrap网格系统。我最近两年一直在使用Bootstrap，它非常容易学习/使用。响应列不再令人头痛：）

http://getbootstrap.com/css/#grid

3列布局在移动设备上显示为1

4 个答案: