1

我在将某些内容放入边框时遇到了麻烦。输入更多文本时，它不会延伸以适应垂直方向，而是继续越过边框，如随附的屏幕截图所示：

我的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;
}

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

4

3 回答 3

1

如果你把HTML代码也放上去会更好。

右侧元素是fixed（或absolute）或float。<br />如果它是浮动的，您可以通过在其父元素的末尾添加 a 并对其进行设置来简单地修复clear: both;它。像这样：

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

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

然而absolute，万一这并不像我解释的那么容易，建议修改absolute（或fixed）在该部分的使用。

祝你好运，
穆罕默德·阿里·夏帕桑

于 2013-03-01T08:47:21.383 回答
0

问题似乎是浮动的右列。

#rightcol {float: right;}

看来您需要清除浮动，因为浮动元素已从正常页面流中删除，父元素不会扩展以匹配高度。一个简单的解决方案是为您的父元素或类添加一个 clearfix（在我们的例子中是 ID）

#content:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

这应该可以解决您的问题，如果您对此有更多疑问，我建议您查看此处。

于 2013-03-01T09:01:10.947 回答
0

您必须在 id=content 上再放置一个 div，然后您可以调用 calss=pagewrapper。

.pagewrapper{边距：0自动；宽度：800 像素；}

将 float:left 放入您的 ID

内容{浮动：左；}

于 2013-03-01T10:11:07.453 回答