14

JavaScript を使わずにこれを行う方法があることを願っています。インラインブロックで表示される 2 つの要素があります。どちらも幅と高さが 200 ピクセルであるため、ブラウザーのサイズが非常に小さい (またはモバイル ブラウザーを使用している) 場合を除き、両方とも同じ行に表示されます。2 つの要素の間に 50px のスペースを確保したいので、2 番目の要素に「margin-left: 50px」を追加しました。これで問題なく動作します。両方の要素が同じ行に収まらないサイズにブラウザーのサイズが変更されると、2 番目の要素が次の行に折り返されます。問題は、2 番目の要素にまだ 50 ピクセルの左余白があるため、要素が中央に表示されないことです。JavaScript を追加して、コンテナーの高さが変化したとき (要素が次の行に折り返されたとき) を検出し、左マージンを削除することができます。

簡略化した私のコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <div id="wrapper" style="text-align: center;">
            <div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
            <div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
        </div>
    </body>
</html>

フィドル: http://jsfiddle.net/YRshx/

4

7 に答える 7

14

bastianonm のソリューションに基づいて、これを試してください。

    <div id="wrapper" style="text-align: center; margin:0 -25px;">
        <div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
        <div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
    </div>

http://jsfiddle.net/YRshx/6/

于 2013-06-07T07:04:27.170 に答える
2

次のようなことができます。

@media screen and (max-width: 453px){
    #elem2 { margin-left:0 !important; }
}

http://jsfiddle.net/YRshx/3/

于 2013-06-07T06:43:15.797 に答える
0

動作中のjsFiddleデモ

左と右の両方、および両方の要素にマージンを追加してみてください。

<div id="wrapper" style="text-align: center;">
    <div id="elem1" style="margin: 0 25px; display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
    <div id="elem2" style="margin: 0 25px; display: inline-block; background-color: #00f; width: 200px; height: 200px;"></div>
</div>

ただし、実際のレイアウトに基づいて、このトリックは機能しないか、さらに多くのことが必要になる場合があります。

于 2013-06-07T06:37:40.010 に答える
0

インラインコンテナをインラインdivに保持してフロートするだけです...

コード：-

<div id="wrapper" style="text-align: center;">
    <div id="outer" style="display: inline-block;">
    <div id="elem1" style="float:left; background-color: #f00; width: 200px; height: 200px;"></div>
    <div id="elem2" style="float:left; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
    </div>
</div>

デモ:- http://jsfiddle.net/YRshx/2/

ありがとう...

于 2013-06-07T06:40:05.313 に答える