0

したがって<div>、ヘッダーとテキストの段落を持つ要素と、Google マップを持つ要素の 2 つの要素があります。

HTML:

<div id="info">
    <h1>TITLE</h1>
    <p>
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    </p>
</div>
<div id="map-canvas"></div>

画面が十分に大きい間 (約 600 ピクセル以上)に<div>要素を隣り合わせに配置し、画面が目的の解像度よりも小さくなったときにマップ<div>がテキストの下に移動するようにします。<div>

現時点では、以下に示すように、jQuery を介したかなり醜いソリューションがあります。

function resize(){
    var windowSize = $(window).width();
    if (windowSize < 768){
        $('#info').css('width','100%');
        $('#info').css('float','');
    }
    else{
        var width = $('#naviTable').width() - 350; 
        $('#info').css('width',width);
        $('#info').css('float','left');
    }
}

は#navi-table、ページの表示領域の全幅であるため、方向要素です。

マップ<div>は常に同じ幅であるため、目的の効果を得るには、よりスマートな方法があります。@media は、最近のブラウザーでしかサポートされていないため、私が探しているものではありません。

編集：

display:flexCSSの属性を使用して問題をある程度修正することができましたが、新しい問題が発生しました。

新しいコードは: HTML:

<div id="info-box">
<div id="info">
<h1>TITLE</h1>
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</div>
<table id="mapTable"><tr><td>
<div id="map-canvas"></div>
</td></tr><tr><td>
<h2 id="mapLink">TEXT TEXT...</h2>
</td></tr></table>
</div>

そしてcss iveに次を追加しました：

#info-box{display:flex;}
#info{width:100%;}
#mapTable{width:300px;}

今回はJSはありません。

問題は、IE が表示プロパティのフレックス値を理解していないことです...これを修正する方法を知っている人はいますか?

このフィドルは、固定要素と相対要素が切り替えられたときの動作を示しています(固定要素は左、相対要素は右): http://jsfiddle.net/hJzJf/

しかし、私はその逆が必要です。

4

2 に答える 2

0 
@media all and (min-width:600px){
    div{
        display:inline;
        margin-left:/*some amount*/
    }       
}

@media all and (max-width:599px){
    div{
        display:block;
    }       
}
于 2013-09-06T17:57:39.397 に答える