html - CSS 边框样式适配内容

Question

我一直无法将某些内容放入边框。当输入更多文本时，它不会延伸到垂直方向，而是继续越过边界，如所附屏幕截图所示:

我的 CSS 文件如下:

body {
    background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png);
    background-repeat:repeat;

    background-attachment:fixed;
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Tahoma, sans-serif;
    }
h1 {
    text-align: center;
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 24pt;
    text-shadow: 3px 3px #999999;
    font-weight: bold;
}
p {
    font-size: 8pt;
}
#content {
    width: 800px;
    margin: auto;
    border: 4px solid gray;
    border-radius: 20px;
    background-color: #A2B964;
}
#banner {
    height: 50px;
    background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/bannerbg.png);
    background-repeat:repeat;
}
#banner img {
    display: block;
    margin:auto;
    overflow: hidden;
}
#general {
    float: right;
    width: 250px;
    border-radius: 0px 20px 0px 0px;
}
dl {
    margin: 10pt;
    font-size: 8pt;
    font-family: Ariel, sans-serif;
}
dt {
    font-weight: bold;
    margin-top: 10pt;
}
ul {
    list-style-type: none;
}
li {
    margin-left:0px;
}
#leftsection {
    width: 550px;
    overflow:hidden;
    background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png);
    background-repeat:repeat;
    background-attachment:fixed;
}
#rating {
    height: 83px;
    background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/rbg.png);
    background-repeat: repeat;
    overflow: hidden;
    border-radius: 20px 0px 0px 0px;
}
#rating img {
    border-radius: 20px;
}
.special {
    vertical-align: top;
    font-size: 48pt;
    font-weight: bold;
    color: red;
}
.review {
    font-size: 8pt;
    font-family: Verdana, Tahoma, sans-serif;
    font-weight: bold;
    background-color: #E8DC9B;
    border: 2px solid gray;
    border-radius: 10px;
    padding-left: 8px;
    padding-right: 8px;
}
.personal {
    margin-bottom: 20pt;
}
.italic {
    font-style: italic;
    margin-left: 40px;
}
img.review {
    padding-right: 5px;
}
#leftcol {
    margin-top: 2%;
    margin-left: 2%;
    margin-right: 2%;
    float: left;
    width: 47%;
}
#rightcol {
    margin-top: 2%;
    margin-right: 2%;
    float: right;
    width: 47%;
}
#pages {
    text-align:center;
    margin: 5px;
}
#validated {
    position: fixed;
    top: 90%;
    left:80%;
    width: 600px;
}
#validated img {
    opacity: 0.5;
}

我在 CSDeck 上添加了 HTML 代码:http://cssdeck.com/labs/full/bldwwaec

Answer 1

如果把HTML代码也放上去就更好了。

右边的元素是fixed (或 absolute )或 float .如果它是 float 的，您可以通过添加 <br /> 来简单地修复它。在其父元素的末尾并设置 clear: both;在上面。像这样:

<div id="parent">
    <div>aaa</div>
    <div class="float-right">bbbb</div>
    <br style="clear: both;" />
</div>

现在，div#parent适合内容，如果您在其上设置边框，您的问题就会解决。

在absolute然而，情况并不像我解释的那么容易，建议修改 absolute 的使用。 (或 fixed)用于该部分。

祝你好运，
Mohammad Ali Sharpasand