CSS 边框样式拟合内容 [英] CSS border styling fitting content

问题描述

我在将某些内容装入边框时遇到了问题.当输入更多文本时，它不会垂直扩展以适应它只是继续越过边界，如附加的屏幕截图所示:

我的CSS文件如下:

body {背景图片:网址(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png)；背景重复:重复；背景附件:固定；边距:0px；填充:0px；字体系列:Verdana、Tahoma、sans-serif；}h1{文本对齐:居中；字体系列:Tahoma、Verdana、sans-serif；字体大小:24pt；文本阴影:3px 3px #999999;字体粗细:粗体；}p{字体大小:8pt；}#内容 {宽度:800px；保证金:自动；边框:4px纯灰色；边框半径:20px；背景颜色:#A2B964；}#横幅 {高度:50px；背景图片:网址(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/bannerbg.png)；背景重复:重复；}#banner img {显示:块；保证金:自动；溢出:隐藏；}#一般的 {浮动:对；宽度:250px；边框半径:0px 20px 0px 0px;}dl{边距:10pt；字体大小:8pt；字体系列:Ariel，无衬线；}dt{字体粗细:粗体；边距顶部:10pt；}ul{列表样式类型:无；}李{左边距:0px;}#leftsection {宽度:550px；溢出:隐藏；背景图片:网址(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png)；背景重复:重复；背景附件:固定；}#评分 {高度:83px；背景图片:网址(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/rbg.png)；背景重复:重复；溢出:隐藏；边框半径:20px 0px 0px 0px;}#rating img {边框半径:20px；}.特别的 {垂直对齐:顶部；字体大小:48pt；字体粗细:粗体；红色;}.审查 {字体大小:8pt；字体系列:Verdana、Tahoma、sans-serif；字体粗细:粗体；背景色:#E8DC9B；边框:2px纯灰色；边框半径:10px；左边距:8px；右填充:8px；}.个人的 {底边距:20pt；}.斜体{字体样式:斜体；左边距:40px；}img.review {padding-right: 5px;}#leftcol {保证金最高:2%；左边距:2%；右边距:2%；向左飘浮;宽度:47%；}#rightcol {保证金最高:2%；右边距:2%；浮动:对；宽度:47%；}#pages {文字对齐:居中；边距:5px；}#验证{位置:固定；顶部:90%；左:80%；宽度:600px；}#validated img {不透明度:0.5；}

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

解决方案

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

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

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

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

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

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

I've been having trouble fitting some content into a border. When entering more text, instead of extending to fit vertically it just continues past the border as shown in the attached screenshot:

And my CSS file is as follows:

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

I've added the HTML code on CSSDeck: http://cssdeck.com/labs/full/bldwwaec

解决方案

It would be better if you put the HTML codes too.

The right side element is either fixed (or absolute) or float. If it is float, you can simple fix it with adding a <br /> at the end of its parent element and set clear: both; on it. Like this:

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

Now, the div#parent fits with the content and if you set a border on it, your problem would fix.

In absolute case, however, it is not as easy as I explained and recommend revising the use of absolute (or fixed) for that part.

Good luck,
Mohammad Ali Sharpasand

这篇关于CSS 边框样式拟合内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！