Question

我正在建立一个网站，我正处于紧张状态，努力使下面的布局在使用媒体查询的小屏幕设备上垂直对齐。

对于较小的屏幕，此顺序的所需垂直布局：

介绍
image 1
sidedoc
image 3
结束
image 4

图像2不能在较小的屏幕上显示

＆＃13;

    .container {
	border-width: thick;
	border-style: groove;
	border-radius:5px;
	width:100%;
  }
  
.intro {width: 910px; text-align: justify; padding: 10px; margin-bottom: 10px;}
 
.sidedoc { width: 390px; text-align: justify; float: right; margin-right: 10px; margin-top: -450px;}

.conclude {width: 920px; padding: 10px; text-align: justify; margin-top: 20px; }

.readysetgo {
    float: right;
	border-radius: 7px;
	margin-right: 28px;
	margin-top: -148px;
	 -webkit-animation: mymove 10s infinite; /* Chrome, Safari, Opera */
    animation: mymove 10s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    50% {box-shadow: 10px 20px 30px green;}
}

/* Standard syntax */
@keyframes mymove {
    50% {box-shadow: 10px 20px 30px green;}
}


.reclaim {max-width: 100%;margin-left: 120px;}

 
.rounded {max-width: 50%; border-radius: 10px; float: right; margin-right: 17px; margin-top: -375px;}

   
.thinkgreen {max-width: 100%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 25px; margin-top: 20px;}

＆＃13;

  <div class="container">
  
  <div class="intro">
content 1
  </div>

<img src="Images/Capturegreen.JPG" width="375" height="191" alt="" class="readysetgo"/>

<img src="Images/TotalReclaimICON_NoShadow.jpg"  alt="" class="reclaim"/>


 <div class="sidedoc">
 content 2 
 </div>

<div class="conclude">
content 3
</div>

<img src="Images/ttr.jpg" width="375" height="370" alt="" class="rounded"/>

<img src="Images/thinkgreen.jpg" width="268" height="273" alt="" class="thinkgreen"/>

</div>

＆＃13;

Answer 1

有几种方法可以实现这一点，一种方法是在你的CSS中使用@media。

以下是使用@media

的example

HTML

<div id="pagewrap">

    <header>
        <h1>3 Column Responsive Layout</h1>
    </header>

    <section id="content">
        <h2>1st Content Area</h2>
        <p>This page demonstrates a 3 column responsive layout, complete with responsive images and jquery slideshow.</p>
    </section>

    <section id="middle">
        <h2>2nd Content Area</h2>
        <p>At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.</p>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </section>

    <aside id="sidebar">
        <h2>3rd Content Area</h2>
        <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
    </aside>

    <footer>
        <h4>Footer</h4>
        <p>Footer text</p>
    </footer>

</div>

CSS

/* STRUCTURE */

#pagewrap {
    padding: 5px;
    width: 960px;
    margin: 20px auto;
}
header {
    height: 100px;
    padding: 0 15px;
}
#content {
    width: 290px;
    float: left;
    padding: 5px 15px;
}

#middle {
    width: 294px; /* Account for margins + border values */
    float: left;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
}

#sidebar {
    width: 270px;
    padding: 5px 15px;
    float: left;
}
footer {
    clear: both;
    padding: 0 15px;
}

/***********************MEDIA QUERIES***********/
/* for 980px or less */
@media screen and (max-width: 980px) {

    #pagewrap {
        width: 94%;
    }
    #content {
        width: 41%;
        padding: 1% 4%;
    }
    #middle {
        width: 41%;
        padding: 1% 4%;
        margin: 0px 0px 5px 5px;
        float: right;
    }

    #sidebar {
        clear: both;
        padding: 1% 4%;
        width: auto;
        float: none;
    }

    header, footer {
        padding: 1% 4%;
    }
}

/* for 700px or less */
@media screen and (max-width: 600px) {

    #content {
        width: auto;
        float: none;
    }

    #middle {
        width: auto;
        float: none;
        margin-left: 0px;
    }

    #sidebar {
        width: auto;
        float: none;
    }

}

/* for 480px or less */
@media screen and (max-width: 480px) {

    header {
        height: auto;
    }
    h1 {
        font-size: 2em;
    }
    #sidebar {
        display: none;
    }

}

#content {
    background: #f8f8f8;
}
#sidebar {
    background: #f0efef;
}
header, #content, #middle, #sidebar {
    margin-bottom: 5px;
}

#pagewrap, header, #content, #middle, #sidebar, footer {
    border: solid 1px #ccc;
}

再次归功于this page

Answer 2

这是您https://jsfiddle.net/snpsp6as/5/

的基本布局

HTML

<div class="intro">
  intro
</div>
<img class="image1" src="http://lorempixel.com/400/200/">
<img class="image2" src="http://lorempixel.com/400/200/">
<div class="sidedoc">
  Side Doc
</div>
<img class="image3" src="http://lorempixel.com/400/200/">
<div class="conclude">
  conclude
</div>
<img class="image4" src="http://lorempixel.com/400/200/">

CSS

body {
  margin: 0;
}

div,
img {
  width: calc(50% - 6px);
  height: 200px;
  border-style: solid;
  float: left;
}

.image3 {
  float: right
}

.image4 {
  margin: auto;
  display: block;
  float: none;
}

img {
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 50%;
  //width: 400px;
  //height: 100px;
}

@media(max-width: 800px) {
  div,
  img {
    width: 100%;
  }
  .image2 {
    display: none;
  }
}

扩展窗口见下图

在较小的屏幕上垂直堆叠3个div和4个图像

2 个答案: