Question

我有两个问题：

div 2的高度与div 1或3不同，我试过this solution 从堆栈溢出，但它无法正常工作。
要在div 2中设置的菜单是响应式的，但在缩小宽度时，它会响应列表下来，推动旋转木马甚至在下面，拧紧整个设计.....
有什么方法可以使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>

Answer 1

由于您的横幅广告中没有任何内容，为什么不使用::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 ul为width设置一个像素.mid_div，每当white-space: nowrap得到ul时较小的内容不会回流。您还可以在li {display: inline}上同时{{1}}尝试{{1}}。

Answer 2

如果您完全控制了源，那么这是我的解决方案（JSFiddle preview）：

的 HTML 的

<div class="wrapper"> <div class="banner-left"></div> <div class="banner-mid"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> <div class="banner-right"></div> <p>This is some content under the menu</p> </div>

的 CSS 的

.wrapper { margin: 40px auto; width: 600px; } .banner-left, .banner-right { background: #eee; float:left; height: 50px; width: 50px; } .banner-left { margin-left: -50px; } .banner-right{ margin-right: -50px; } .banner-mid { float:left; margin-bottom: 20px; width: 100%; } .banner-mid > ul { background: #ddd; list-style:none; margin: 0; padding: 0; height: 50px; width: 100%; } .banner-mid > ul > li { float:left; line-height: 50px; padding-left: 10px; }

Answer 3

你的第一个问题的答案，让所有的div都高度相同，你需要这样做：

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

对于第二个答案，您可以将最小宽度应用于divs / div并将溢出设置为滚动。

div设计问题中的响应式菜单

3 个答案: