在特定屏幕宽度下将div移动到另一个div下方

时间:2015-04-09 10:39:58

标签: html css media-queries

我有一个4个横幅并排出现的移动网站。当我达到某个屏幕宽度时,我希望其中2个降到另一个下方2.部分问题是我使用width: 24.96%来获得适合身体的所有4个div的正确总宽度。

CSS

.small_banners .banner_block {
  display: block;
  max-width: 100%;
  height: auto;
  width: 24.96%; }

.small_banners {
  float: left;
  clear: both;
  width: 100%;
  margin: 0 0 15px; }

HTML

<div class="small_banners">
    <div class="banner_block">
      <div>
        Content
      </div>
    </div>
    <div class="banner_block">
      <div>
        2nd piece of content
      </div>
    </div>
    <div class="banner_block">
      <div>
        3rd piece of content
      </div>
    </div>
    <div class="banner_block">
      <div>
        The 4th piece of content
      </div>
    </div>
  </div>

当屏幕达到958px时,我希望使用简单的媒体查询将第3和第4个div降至第1和第2个以下:@media all and (max-width: 958px) {

2 个答案:

答案 0 :(得分:2)

这应该有效。

 @media (max-width: 958px) {
        .small_banners .banner_block{
           width:50% !important;
      }
    }

答案 1 :(得分:1)

如果正确实施,Kishan的方法确实有效!这是一个小提琴,用于说明如何使用css max-width属性根据屏幕宽度更改4 .banner_block元素的宽度。

https://jsfiddle.net/evc670st/1/

注意类banner_block的元素使用display:blockfloat:left水平堆叠。如果您不想float这些元素,可以使用display: inline-block,但请确保html标记之间没有空格。

来源:https://css-tricks.com/fighting-the-space-between-inline-block-elements/