Question

我正在开发一个网站，我正在尝试创建这种布局

screenshot

我可以使用此

来完成此操作

HTML

<body>
    <div class="d3-d4 m1" id="logoHolder">
        <img src="images/payday_logo_long_web.png" alt="Pay Day IRA" />
    </div>
    <div class="d5-d10 m1" id="navHolder">
        <ul id="mainNavigation">
            <li><a href="#">Log In</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Investment</a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
    </div>
    <!--BREAK-->

    <div class="d1-d2 greenSideBar" id="leftGreenSideBar" >

    </div>
    <div class="d3-d6 m1" id="employerButton">
        Employer
    </div>
    <div class="d7-d10 m1" id="employeeButton">
        Employees
    </div>
    <div class="d11-d12 greenSideBar" id="rightGreenSideBar">

    </div>

    <!--BREAK-->


</body>

CSS

/*Green Side Bars*/
.greenSideBar{
    background-color:#6EBE44;
    height:35px;
}
    #rightGreenSideBar{
    border-left-width:5px;
    border-left-style:solid;
    border-left-color:white;
    }

/*Employee/Employer Buttons*/
#employerButton{
    background-color:#6EBE44;
    height:35px;
    border-left-width:5px;
    border-left-style:solid;
    border-left-color:white;
}


#employeeButton{
    background-color:#6EBE44;
    height:35px;
    border-left-width:5px;
    border-left-style:solid;
    border-left-color:white;
}

唯一的问题是这是创建一个水平滚动条。 我把它缩小到原因

border-left-width:5px; border-left-style:solid; border-left-color:white;
employeeButton，employerButton和rightGreenSideBar
的

如果我删除它，它没有水平滚动条。

如果没有滚动条，我怎样才能实现这种效果。

我创造了一个小提琴，但它没有同样的问题。

Fiddle

修改

以下是我上传到服务器的示例

Example

Answer 1

您始终可以将带边框的元素抛出到父div中，以便边框和内容都适合该框而不是允许它们溢出。很难排除故障，没有小提示显示栏

Answer 2

将此添加到包含滚动条的包装元素：

.wrapper { overflow-x: hidden; }

Answer 3

我把你的酒吧区域包裹在一个div中（可能应该有一些东西可以包含它们），最大宽度：100％;溢出：隐藏;并且酒吧已经消失，功能到位。当然它可能不是完美的解决方案，但你有像margin-left这样的东西：-100％正在进行中。我个人会废弃您用于该行的网格系统，只使用百分比指定宽度并使用媒体查询隐藏外部块。

从左右div边框防止水平滚动条

3 个答案: