相关疑难解决方法(0)
xHTML/CSS:如何使内部div获得100%宽度减去另一个div宽度
我在外部有一个嵌套的div,宽度为100%.两个嵌套的div应该在一行中,并且首先应该从它的内容中获取它的大小:
<div id="#outer" style="width:100%; border:1px">
<div id="#inner1" style="border:1px; display:inline">
inner div 1. Some text...
</div>
<div id="#inner2" style="width:100%????; border:1px; display:inline">
inner div 2...
</div>
</div>
问题是如果没有指定#inner1 div的宽度并且取决于它里面的内容,如何使#inner2 div获得水平空间的其余部分？
PS在我的情况下,所有样式都在单独的类中,这里我将CSS放入样式属性只是为了简化.
我希望结果在IE7 +和FF 3.6中工作
对我来说更多细节看起来像这样:
<style type="text/css">
.captionText
{
float:left;
}
.captionLine
{
height: 1px;
background-color:black;
margin: 0px;
margin-left: 5px;
margin-top: 5px;
border: 0px;
padding: 0px;
padding-top: 1px;
}
</style>
<table style="width:300px;">
<caption width="100%">
<div class="captionText">Some text</div>
<div class="captionLine"> </div>
</caption>
<tr>
<td>something</td>
</tr>
</table>
这是我想要的图像:
推荐指数
解决办法
查看次数
父高不跟随他们的浮子
我的mainContainer高度不遵循他们的孩子宽度
这是我的代码你有什么建议请指教.
我需要CSS解决方案而不是JavaScript,所以提前感谢
<div id="mainContainer">
<div id="leftContent">
</div>
<div id="rightContent">
</div>
</div>
这是我的CSS
#mainContainer{
width: 1000px;
/*height: 1000px;*/
height:auto;
margin-left:auto;
margin-right:auto;
background-color: #ff6600;
padding-bottom: 20px;
}
#leftContent{
height: 100px;
float: left;
width: 380px;
background-color: violet;
}
#rightContent{
height: 100px;
float: right;
width: 620px;
background-color: yellow;
}
推荐指数
解决办法
查看次数
为什么<fieldset>是明确的浮动？
考虑以下测试用例,其中浮动元素和内联元素放置在一个<fieldset>对比<div>:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.float {float:right; background-color:red; height:200px;}
</style>
</head>
<body>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<fieldset>
<span>Inline!</span>
<div class="float">Float!</div>
</fieldset>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
<div>
<span>Inline!</span>
<div class="float">Float!</div>
</div>
</body>
</html>
渲染时,场集是200像素高(它们清除浮点数？),而div只有内联元素高.这种行为的原因是什么,是否有一种解决方法允许字段集的行为与div一样？
推荐指数
解决办法
查看次数
为什么溢出:隐藏扩展父元素(包含浮动的子元素)？
简而言之:
基本上,我只是想知道为什么过度使用:隐藏了包含浮动物品的容器.它不应该像这个图像中那样隐藏溢出的元素http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png
为什么会这样做而不是http://css-tricks.com/wp-content/csstricks-uploads/overflow-float.png
长版本:
非定位,非浮动,块级元素的作用就像浮动元素不存在一样,因为浮动元素相对于其他块元素不流动.内联元素环绕浮动元素以确认它们的存在.我知道溢出属性如何工作以及应用它的位置,并且清除浮动最好使用clearfix而不是overflow属性(尽管某些情况可能需要使用溢出清除).但是,我仍然不明白为什么它扩展了父元素,特别是当我们使用overflow:hidden时.为什么父元素只是"隐藏"溢出的浮动子元素？毕竟,我们不是隐藏溢出？
推荐指数
解决办法
查看次数