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

より簡単なソリューション:

各画像を位置に設定することで構成されます:絶対; 最後のものを除いて:

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

要素を「フラッド」に保持すると、その親に必要な高さの値が提供されます。

于 2013-03-14T10:32:36.810 に答える
0

これで、CSSとJavascriptの両方を使用した非常に単純な混合ソリューションができました。主なニーズは「モバイルファースト」設計であるため、smartphoineターゲットメディアクエリcssファイルの画像コンテナにunmin-heightを導入しました。

ヘッドタグ内：

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

次にCSS：

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

そして少しのJavascript：

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

したがって、この混合ソリューションでは、Javascriptをアクティブにし、メディアクエリステップごとに最小の高さを設定し、グローバルページと最大ページのサイズで計算されたコンテナの高さのパーセンテージを設定する必要があります。私の場合は次のようになります。

#page{max-width: 1024px;}

コンテナの高さは約280pxです。

これがいつか誰かを助けることができることを願っています;-)

于 2013-03-13T11:17:47.727 に答える