Question

我正在尝试将我制作的网站转换为响应式网站。我的网站布局目前看起来像这样：

除非我重新调整浏览器的大小以测试我的网页在智能手机上的外观，否则图像会与他们在小提琴上的方式重叠。响应的唯一元素是中间的两个图像（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

我不确定我是否理解你，但是尝试将两个图像放在div中，宽度为100％，因此它覆盖了页面的整个宽度，并且它不能重叠。这对我很好。

Answer 2

我认为你正在采取艰难的方式，但这是你想要的，更简单的方式：

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>

*第一列将始终位于顶部。

但你真的应该考虑使用GRID系统进行响应式设计。

在制作网站响应时重叠图像

2 个答案: