Question

我是这个网站的新手，还有html / css。我试图在这里制作一些简单的东西，但我已经坚持这一点。

HTML：

<body>
<div id="container">
    <div id="column1-wrap">
        <div id="column1">Column 1</div>
    </div>
    <div id="column2">Column 2</div>
    <div id="clear"></div>
</div>
</body>

CSS：

#container {
border:5px solid #990000;
border-radius:10px;
}
#column1-wrap {
    float: left;
    width: 100%;
}
#column1 {
    background-color: cyan;
    margin-right: 200px;
}
#column2 {
    background-color: lime;
    float: left;
    width: 200px;
    margin-left: -200px;
}
#clear {
    clear: both;
}

背景颜色与边缘处的边框重叠。我希望背景颜色保持在边框内。任何人都可以帮我这个吗？

Answer 1

只需将overflow:hidden添加到#container

即可

Demo Fiddle

请注意，您也可以用更简单的方式完成您想要的任务：

Demo Fiddle

HTML

<div id="container">
    <div id="column2">Column 2</div>
    <div id="column1">Column 1</div>
</div>

CSS

#container {
    border:5px solid #990000;
    overflow:hidden;
    border-radius:10px;
}
#column1 {
    background-color: cyan;
    overflow:hidden;
}
#column2 {
    background-color: lime;
    float: right;
    width: 200px;
}

Answer 2

这是你想要的吗？ JSFiddle

完整的CSS：

#container {
border:5px solid #990000;
border-radius:10px;
}
#column1-wrap {
    float: left;
    width: 100%;
}
#column1 {
    background-color: cyan;
    margin-right: 200px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;

}
#column2 {
    background-color: lime;
    float: left;
    width: 200px;
    margin-left: -200px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}
#clear {
    clear: both;
}

Answer 3

请检查：http://jsfiddle.net/u6GEh/4/

#container {
margin-top:80px;
border:5px solid #990000;
border-radius:10px;
height:30px;
padding:10px;
}

。我想你可以了解填充是如何使你的背景与边界保持距离的。更改值，直到您满意为止。

如何使背景颜色不与边框重叠？

3 个答案:

Demo Fiddle

Demo Fiddle