1

私はこれを機能させるためにさまざまなことを試みました。私はhtmlマークアップに少し古くなっているので、許してください。しかし、私の問題は簡単に解決できると確信しています。私は2つのdivを持っています（1つの画像ロゴと1つのフラッシュオブジェクトの炎）任意のブラウザ画面解像度で中央に配置したいコンテナdiv内に中央揃えにします。また、ブラウザウィンドウの幅が800ピクセル未満の場合にのみ、水平スクロールバーを表示したいので、コンテナdivのmin-width：800px（これは問題なく動作します）。私の子のdivは上下に表示され続け、絶対位置に設定すると、ちょうど左上に表示されます.....すべてを中央に配置し、両方のdivを画面の上部に配置したいだけです。 、誰かが私を助けて正しい方向に向けてくれませんか。

ありがとうアンディ

.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
}
.logo {
margin: 0 auto;
position:absolute;
vertical-align:top;
display:inline-block;
width:1059px;
height:136px;   
}
.flame {
margin: 0 auto;
vertical-align:top;
position:absolute;
display:inline-block;
width:861px;
height:134px;
}
4

3 に答える 3

0

最終版

要約すると、タスクは基本的に次のとおりです。

  • 2つの要素の幅が異なる幅が1つの行に並んで配置されている
  • この行は、ヘッダーの一種として常に中央に配置する必要があります
  • 画面が800pxより小さい場合にのみ、水平スクロールバーが表示されます
  • 見えないエッジは左側と右側でトリミングされます

これは可能な解決策です：

jsfillde.netで購入する前に試してください

そして少し説明：

HTMLマークアップ

<div class="wrapper">
    <div class="center">
        <img src="" alt="">
        <object></object>    
    </div>
</div>

CSS

body, html {
    width: 100%;
    min-width: 800px;
    height: 100%;
    margin: 0;
    padding: 0;
}

div.wrapper {
    width: 100%;
    height: 134px;
    overflow: hidden;
}

div.center {
    position: relative;
    margin:0 auto;
    width: 800px;
    height: 100%;
}

div.center > img {
    position: absolute;
    top: 0;
    left: -499px;
}

div.center > object {
    position: absolute;
    top: 0;
    left: 560px;
}

「仕組み」について

最初のdivwrapperは、左側から右側までの領域にまたがっています。これは常に見える空間です。overflow: hidden;その要素で使用したエッジを切り取るため。したがって、突き出たものはすべて見えなくなります。

2番目のdivcenterは、を使用してビューポートの中央に配置されmargin: 0 autoます。幅は固定されています。800pxこれが質問の望ましい最小幅だったので、私は使用しました。他のワイドでも動作します。

次に、2つのヘッダー要素を揃えます。どちらも幅が固定されています。この場合、画像は1059ピクセル、オブジェクトは861ピクセルで、合計で1920ピクセルになります。これらの要素の中央は960pxで明らかです。ページの最小幅が800pxであるため、コンテナは実際には400pxになってcenterいます。したがって、 160ピクセルのシフトがあるため、両方の要素の実際の合流点は、このコンテナ内で560ピクセルになります。したがって、オブジェクトの場合は簡単です。単純なセットです。ただし、左側のコンテナを配置する必要があります。この時点で終了します。幅は1059pxで、 560pxから差し引きます。left: 560px;の最終値を取得しますleft: -499px;。

中央のコンテナが中央に配置されるため、両方の要素も中央に配置されます。また、wrapper'オーバーフローが非表示になっているため、ビューポートの端で両端が切り取られます。スクロールバーは表示されません。

最後に、残っているのは1つだけです。-tagに設定min-width:800pxすると、ウィンドウが800px<body>より小さい場合に、スクロールバーがすぐに表示されるようになります。

最初の答え

position: absoluteposition親を明示的に設定する場合を除いて、親フローから要素を取り出します。

.container {
    position: relative;
}

これでうまくいくはずですが、マークアップでテストしませんでした。

于 2012-10-19T14:40:02.610 に答える
0 
.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
**position:relative;**
}


@media only screen and (max-width: 800px){
html{
  overflow: auto;
  overflow-y: hidden;
}
}
于 2012-10-19T14:42:20.840 に答える
0

HTML：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
margin:auto;
width:800px;
height: 500px;
background-color:#F00;
}
.logo {
margin:auto;
float:left;
width:450px;
height:136px;   
background-color:#096;
}
.flame {

margin:auto;
float:left;
width:350px;
height:134px;
background-color:#099;
}
</style>
</head>

<body>

    <div class="container">
        <div class="logo">LOGO GOES HERE</div>
        <div class="flame">FLASH CONTENT GOES HERE</div>
    </div>
</body>
</html>

フロートを使用すると、divを隣り合わせに積み重ねることができます。ただし、divの幅の合計は、コンテナの幅以下である必要があります。そうでない場合、2番目のdivは最初のdivの下に表示されます。コンテナも常にブラウザの中央に配置されます。また、ブラウザの幅が800px（コンテナの幅）未満の場合、水平スクロールバーが表示されます。最後に、このコードはコンテナを中央に配置しますが、float要素の幅の合計がコンテナの幅よりも小さい場合はdivを中央に配置しません。このリンクをたどって、その方法を学ぶこともできます。

編集済み：あるいは、ロゴとフラッシュバナーの幅の合計がわかっている場合は、合計に等しい幅のdivを作成し、margin：autoプロパティを適用できます。追加のdivの使用と、ロゴとフラッシュバナーの幅に関する事前知識が含まれますが、目的に合っていると思います。お役に立てれば。:)

于 2012-10-19T18:49:04.763 に答える