0

サイトのスケッチを作成しました。jsFiddleを参照してください。

HTML:

<div id="BG-scroll">
    <div id="faders">
        <div id="links"></div>
        <div id="filler"></div>
        <div id="rechts"></div>
    </div>
    <div id="wrapper"></div>
</div>

そしてCSS：

#BG-scroll {
    width: 100%;
    height: 503px;
    background-position: center;
    background-image: url(images/BG-container-1.jpg);
    background-repeat: no-repeat;
}   

#wrapper {
    width: 650px;
    height: 350px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    background-color: green;
}   

#faders {
    height: 200px;
    width: 950px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
}

#left {
    width: 150px;
    height: 200px;
    position: relative;
    float:left;
    background-color: red;
}

#filler {
    width: 650px;
    height: 200px;
    position: relative;
    float:left;
    background-color: blue;
}

#right {
    width: 150px;
    height: 200px;
    position: relative;
    float:left;
    background-color: pink;
}

私が欲しいのは、ブラウザの中心にある青と緑の div です。赤とピンクの左右の div には、2 つの画像スライドショー (背景用) があります。ラッパーにはメイン サイトがあります。

CSSで2つの中央のdivを中央に配置し、左右のdivに固定幅（300px）を与えることは可能ですか？ブラウザが小さい場合、左のdivはブラウザの外に移動しますこれで、赤い div の左側が常にブラウザの左側に表示されます。

それはCSSでも可能ですか？左右のスライドショーの Joomla モジュールは、スライドショーを配置するための div を生成します。

4

2 に答える 2

0

メディア クエリを実行して div を削除できます。何かのようなもの

@media screen and (max-width: 300px){
    #div{
         display:none;
    }
}

ブラウザーの幅が 300px に達すると、div のスタイルがメディア クエリで設定したものに変更されます。

ただし、残りの質問で何を求めているのかよくわかりません。

于 2013-05-30T00:45:08.737 に答える
0

Agree with cimmanon, there is no red and pink divs in the code. However, generally if you wish to have some element "move out of the browser" when reducing the width of the browser, you could use this CSS style:

position: absolute;
right: ***px;

You probably have to calculate the actual right position by yourself since the flow of html elements normally runs from left-top to bottom-right. Making flow reversed (right to left) is not easy and may not be recommended.

Here is the possible solution for your question.

于 2013-05-30T01:01:29.930 に答える