0

我有 这个布局

我有两个问题：

  • 2的高度div与div1 或 3 不同，我从堆栈溢出尝试 了这个解决方案 ，但它不起作用。
  • 要在 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

由于您的横幅风格没有任何内容，为什么不使用::beforeand ::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}.

于 2013-06-29T13:48:04.887 回答
0

如果您可以完全控制源代码，这是我的解决方案（JSFiddle 预览）：

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;
}
于 2013-06-29T14:23:41.083 回答
-1

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

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

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

于 2013-06-29T13:24:26.330 回答