0

私は このレイアウトを持っています

私には2つの問題があります：

  • 2の高さは1 または 3divと同じではありません 。スタック オーバーフローから このソリューションdivを試し ましたが、機能しません。
  • 2に設定するメニューdivはレスポンシブですが、幅を縮小するとリストダウンし、カルーセルが下に押し出され、デザイン全体がねじ込まれます.....縮小するのではなく
    、レスポンシブにする方法はありますかmid_divそれだけで水平スクロールを作成しdiv ます（画面サイズによって異なります）??

CSS

#h_scroll {
    margin: 0 auto;
    margin-top: 10px;
    width: 80%;
}

#h_scroll_banner {
    display: inline-block;
    width: 100%;
}

#h_scroll .fltlft {
    float: left
}

#h_scroll .fltryt { 
    float: right
}

#h_scroll .mid_div {
    width: 100%;
    background-color: #F11181;
    height: 100%;
}

#h_scroll .mid_div ul {
    list-style: none;
    display: inline-block;
    margin: 0 auto;
}

#h_scroll .mid_div li {
    list-style: none;
    display: inline-block;
}

#h_scroll .mid_div li a {
    display: block;
    line-height: 20%;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    padding: 4%;
    width: 20%;
}

HTML

<div id="h_scroll">
    <div id="h_scroll_banner">            
        <div class="fltlft" id="div_height_to_get">         
            <img src="image/scroll_banner_left.jpg" style="width:100%; height:auto" id="div_height_to_get" />
        </div>

        <div class="fltryt">
            <img src="image/scroll_banner_right.jpg" style="width:100%; height:auto" />
        </div>

        <div class="mid_div" id="div_height_to_set">
            <ul>
                <li><a href="#nogo"> Links </a></li>
                <li><a href="#nogo"> Links </a></li>
                <li><a href="#nogo"> Links </a></li>
                <li><a href="#nogo"> Links </a></li>
                <li><a href="#nogo"> Links </a></li>
            </ul>
        </div>
    </div>
4

3 に答える 3

0

::beforeバナーフレアにはコンテンツが含まれていないため、と を使用してみません::afterか? 3 つの div すべてを同じ高さにする必要がある理由がわかりません。また、生成されたコンテンツを使用して、スライドショーを.mid_div.

.mid_div {
    position: relative;
}

.mid_div::before, .mid_div::after {
    display:block
    width: 50px; /*  image width  */
    height: 50px; /*  image height  */
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    background: url(image/scroll_banner_left.jpg); 
}

.mid_div::after {
    left: 100%;
    background: url(image/scroll_banner_right.jpg);
}

スクロールバーが必要な場合は、と を使用overflow-x: autoしてピクセルを設定すると、コンテンツが小さくなるたびにリフローしなくなります。を持ったまま試着もできます。.mid_div.mid_div ulwidth.mid_divwhite-space: nowrapulli {display: inline}

于 2013-06-29T13:48:04.887 に答える
-1

すべてのdivを同じ高さにする最初の質問への答えは、これを行う必要があります:

div1, div2, div3 { display: table-cell; }

2 番目の回答では、最小幅を div/div に適用し、オーバーフローをスクロールに設定できます。

于 2013-06-29T13:24:26.330 に答える