0

我实际上正在研究响应式设计，但我很困惑：

我需要在他们的 div 父级中将图像类型的子级位置设置为绝对，并将下半部分保留在该父级下。但实际上，我唯一的解决方案是为此父级设置固定高度（在这种情况下，下部的相对边距在动态结构中不起作用）。问题是图像，设置为 max-width: 100%; 为了保持它们的尺寸灵活，随页面扩展，并且下部在调整大小时不再定位：

<div id='page'>
<div id='b0'><img /><img /></div>
<section id='s0'><h2>section title</h2><p>hjkhjkhjk</p></section>
</div>

和CSS：

#page{max-width:1024px; margin: 0 auto;}
#b0{position: relative; height:25%;}/* doesn't work, 100px instead work but responsive design fails */
#b0 img{position: absolute;}

有没有人有解决方案？

提前致谢

4

2 回答 2

1

更简单的解决方案：

包括将每个图像设置为 position: absolute; 除了最后一个：

#b0 img:last-child{position: relative;

将元素保留在“洪水”中为其父级提供所需的高度值。

于 2013-03-14T10:32:36.810 回答
0

Ok, I now have a very simple mixed solution using Both CSS and Javascript: As the primary need is "mobile first" design, i've introduced un min-height for the images container in a smartphoine targeted media query css file:

In the head tag:

<link rel='stylesheet' media='screen and (min-width:320px)' type='text/css' href='css/css.css' />

Then the CSS:

#b0{position: relative; min-height:82px;}

And a little bit of Javascript:

$(document).ready(function(){window.onresize=function(){$('#b0').css({'height' :( this.innerWidth * .25)+'px'})}});

So this mixed solution needs Javascript activated, a min-height to be set up for each media query step, and a percentage for the container height calculated with global and maximum page dimensions: in my case:

#page{max-width: 1024px;}

and a container height at about 280px;

Hope this can help someone someday ;-)

于 2013-03-13T11:17:47.727 回答