content {float：left;}

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

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

Answer 1

如果你也放置HTML代码会更好。

右侧元素是fixed（或absolute）或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

Answer 2

问题似乎是浮右栏。

#rightcol {float: right;}

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

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

这可以解决您的问题，如果您对此有更多疑问，我建议looking here.

Answer 3

你必须在id = content上添加一个div，你可以调用calss = pagewrapper。

.pagewrapper {margin：0 auto; 宽度：800px;}

将浮动：左侧放入您的身份证

CSS边框样式拟合内容

3 个答案:

content {float：left;}