html - 使网站响应时重叠图像

Question

我正在尝试将我制作的网站转换为响应式网站。我的网站布局目前如下所示:

http://jsfiddle.net/ZDk6p/

只有当我调整浏览器大小时测试我的页面在智能手机上的外观时，图像才会像 fiddle 上那样重叠。唯一响应的元素是中间的两个图像 (200x150) 及其下方的文本。我正在尝试转换我的网站，这样当我调整浏览器大小时，所有内容(包括最右边的两个图像)都会变成一个 1 列的网站，与上面元素的宽度相匹配，如下所示:

Enter text Here:
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa

****************
*  Image       *
* **************             
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb

****************
*  Image       *
****************
cccccccccccccccc
cccccccccccccccc
cccccccccccccccc

**Hello World**
ddddddddddddddd
ddddddddddddddd

***************
*  Image      *
*             *
*             *
***************

***************
*             *
*  Image      *
*             *

***************

我的 CSS 代码中有这个媒体查询:

@media screen and (max-width: 480px){

    .events{

    display: block;
    position: absolute;
    width: 25%;
    line-height: 200%;


}

.events p{
    background-color: #d8b5a3;
    margin: 0 5%; 
    font-family: 'Chivo';
    color: #ffffff;
    width: auto;
    position: relative;
}

.events .events-plugin{
    max-width: 100%;
    position: absolute;
    display:block;
    left: 10%;
    width: auto;
    height: auto;
}


.container .picture{

    position: absolute;
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
}
}

但是不行，最右边的图片重叠了。我该如何解决这个问题？提前致谢。

Answer 1

我认为您采用的是 HARD 方法，但这是您想要的一种更简单的方法:

http://jsfiddle.net/luckmattos/ZDk6p/2/

HTML

<div class="row">
    <!-- MAIN CONTENT -->
    <div class="col-main">
       <div class="img">
        <img src="http://placehold.it/200x150" alt="flower">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
       </div>
    </div>

    <!-- SIDE BAR -->
    <div class="col-side">
        <p>Hello World!</p>
        <img src="http://placehold.it/251x281" alt="events">
    </div>

</div>

CSS

.row {
   border:1px solid blue;
}
.row:before, .row:after {
content: " ";
display: table;
clear:both;
}
.col-main {
    position:relative;
    border:1px solid green;
    float:left;
    width:48%;
    padding:10px;
    box-sizing:border-box;
}
.col-side {
    position:relative;
    border:1px solid red;
    float:left;
    width:48%;
    padding:10px;
    box-sizing:border-box;
}

@media (max-width:480px) {
     .col-side,
     .col-main {
         width:100%;
     }
}

使用此 HTML 结构 (div):

<container>
<row>
<column1></column1>
<column2></column2>
</row>
</container>

*第一列总是在最上面。

但是您真的应该考虑使用网格系统进行响应式设计。