gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:04:43 25 4
gpt4 key购买 nike

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

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;
}
}

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

最佳答案

我认为您采用的是 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>

*第一列总是在最上面。

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

关于html - 使网站响应时重叠图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22308185/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com