4

こんにちは私は3つの異なるサイズの要素があり、すべての画面の中央の要素の両側に等しいマージンが必要なレスポンシブレイアウトを作成しようとしています。

これが私のHTMLとCSSです

<section class="container">
    <div href="/" class="pull-left logo"><img src="/images/logo.jpg"></a>
    <div class="slogan pull-left"><img src="/images/slogan.jpg"></div>
    <div class="pull-left support"></div>
</section>

<style>
 .pull-left
{
  float-left;
}
.slogan 
{
  margin: 0 17%;
}    
</style>

ロゴとサポートセクションは固定サイズであるため。上記のCssは、1つの解像度で正常に機能しますが、画面サイズが小さくなると、マージンは同じままになりません。

それを達成する方法はありますか？

編集：これがフィドルです。http://jsfiddle.net/VdYua/22/ 最初は、.slogandivの両側に等しいマージンがあります。しかし、サイズ変更時に、最後のdivは次の行に移動します。ブレーキレイアウトなしでマージンを減らしたい。

4

1 に答える 1

15

このようなものをお探しですか？

HTML:

<div class="centered">This is some content in the centered DIV</div>

CSS:

.centered { background: #888; margin: 0 auto; width: 50%; }

を使用margin: 0 autoすると、要素が水平方向に中央揃えになります。つまり、「両側に等マージン」があります。

上記の方法を使用する場合は、要素に幅を設定する必要がありますが、示されているように、パーセンテージ幅を使用できます (レスポンシブ レイアウトに適していると思われます)。

ただし、フローティング要素ではこの手法を使用できないため、次のようなものを CSS に追加することをお勧めします。

.container { margin: 0 auto; width: 50%; }

あなたの質問を誤解している場合は、お知らせください。

編集：以下のコメントに応えて、あなたが探しているものを達成できたと思います。このフィドルを参照してください

HTML:

<section class="header">

  <div href="/" class="logo"><img src="/images/logo.jpg" /></div>

  <div class="slogan"><img src="/images/slogan.jpg" /></div>

  <div class="support"></div>

</section>

CSS:

.header { padding: 0 50px 0 300px; position: relative; }

.logo, .support { background: red; height: 50px; position: absolute; top: 0; }
.support { background: blue; right: 0; width: 50px; }
.logo { left: 0; width: 300px; }

.slogan { background: black; height: 50px; margin: 0 auto; width: 50px; }

配置/パディングの側面は特にきれいではありません (.support または .logo の幅が変更された場合は、css で変更する必要があります) が、これが純粋な HTML/CSS でそれを行う唯一の安全な方法だと思いますクロスブラウザの方法で（他の誰かがそれを引き受けることに興味がありますが）、重要なのは、それが機能し、完全に有効であることです.

于 2013-01-15T14:06:16.237 に答える