我一直有麻烦适合一些内容到边框。当进入的，而不是延伸到更适合文本，垂直它只是延续了以往作为附加的屏幕截图中显示的边框：CSS边框造型拟合内容

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

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

来源

2013-03-01 AuthenticReplica

这是很难知道什么是什么在你的CSS没有的HTML代码。在[JS滨（http://jsbin.com）将一个链接到一个演示，[的jsfiddle]（http://jsfiddle.net/），[CSSDeck]（http://cssdeck.com/labs）或一个类似的网站也使它更快，更快地帮助你。 – hsan 2013-03-01 08:41:35

你能发布你的html代码吗？ – 2013-03-01 08:42:07

尝试添加“overflow：auto”到您的包含div。 – 2013-03-01 08:50:04

如果你把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

来源

2013-03-01 08:47:21 Sheric

清算工作，但现在我的左侧部分是有，即使他们都在同一个父载截图同样的问题：http://i.imgur.com/PtcihDN.jpg？1 – AuthenticReplica 2013-03-01 09:13:06

父母不会改变孩子的身高。您可以执行以下任一操作： 1.将所有左侧部分放入一个div中，并用'top：0;'和bottom：0;将其设置为绝对值并将content的位置更改为relative '。 2.将左右两部分放在同一个“div”中，并将右侧部分的背景设置为背景，以便背景可以与正确部分一起缩放。页码也可以在'
'之后，在底部。后者更好，因为它不使用“绝对”和“相对”。 – Sheric 2013-03-01 09:23:24

的问题似乎是浮右列。

#rightcol {float: right;}

这样看来你需要清除浮动，因为浮动元素从正常的页面流中去除，父元素不会扩大到企及的高度。一个简单的解决方案是将clearfix添加到您的父元素或类（在本例中ID）

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

这应该解决您的问题，如果你有更多这方面的问题，我建议looking here.

来源

2013-03-01 09:01:10

谢谢你，它适用于我的右侧部分，但现在我的左侧部分不再延伸屏幕截图：http://i.imgur.com/PtcihDN.jpg?1 – AuthenticReplica 2013-03-01 09:06:44

你有把更多的div放在id =内容上，你可以调用calss = pagewrapper。

.pagewrapper {保证金：0汽车; 宽度：800像素;}

放浮动：您的帐号离开

内容{浮动：左;}

来源

2013-03-01 10:11:07 dsfg

CSS边框造型拟合内容

回答

内容{浮动：左;}

相关问题