小CSS问题自动高度和嵌套div的

问题描述 投票:1回答:3

所以,我终于学会我的办法解决CSS越来越遇到了一个小问题。我有一个div容器,用它内部的几个div的,其中之一是一些文字(可以是随机的高度),这将有200像素一个最大高度的图像。

我使用他们身后虚线/彩色背景需要自动展开的高度为准的是最高的,无论是文字或图像。现在,当我使用height:auto在容器DIV它的工作原理非常适合随机高度文本。

但它根据文本的身高只有调整;如果图像比文字越高,图像溢出的背景点缀/彩色框的底部。

我使用的是目前CSS是这样的:

h1 div#like_detailed {
  margin: 0;
  font-size: 1.1em;
  width: 700px;
}

#details-image img {
  border: none;
  clear: left;
  float: right;
  margin: -45px 0 0 0;
  max-height: 200px;
  padding: 0 7px 0 10px;
}

#deets-container {
  background-color: #FEF;
  border: #190AE7 1px dotted;
  height: auto;
  margin-top: 0;
  margin-bottom: 30px;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 0;
}

而对于它的HTML是这样的:

<div id="deets-container" class="rounded">
<!-- Button -->
<div class="likebtnframe">(some code)</div>
<!-- Button -->
<div class="tweetbtnframe">(some code)</div>
<!-- Button -->
<ul id="share">
<li><a name="share">(some code)</a></li>
</ul>
<!-- Submitted By -->
<div class="submitter_detailed"><span class="submitter-color smalltext">(some code)</span> (some code)</div>
<!-- Image -->
<div id="**details-image**">(some code)</div>
<!-- Like / Quote -->
<h1 id="**like_detailed**">(some code)</h1>
</div>

我有一种感觉,这是很容易的,但我的时间不多了梳理出来我自己。

任何人?

css height
3个回答
2
投票

问题是你有没有清除您的DIV包含您的浮动图像。这个最好的解决办法是使用clearfix

以下添加到您的样式表:

.clearfix:before, .clearfix:after {  content: "\0020"; display: block; height: 0; visibility: hidden;    } 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

包含浮动元素总是有什么需要当然,除非你设置该元素的固定高度被清除。

现在,从这个改变你的HTML:

<div id="deets-container" class="rounded">

为此:

<div id="deets-container" class="rounded clearfix">

我希望我帮助。


2
投票

发生这种情况,因为你是漂浮img内的#details-image元素。

当元件是浮动的,其包含的元素有效地忽略它,除非它也浮置。所以,这是什么意思是,当你漂浮你的形象,包含div不再计算作为其内容的一部分,因此不包括在其高度。

还有一招来处理这个,我喜欢使用:

div.anchor {
    float:none;
    clear:both;
    line-height:0;
    font-size:0;
}

现在添加这些锚的div一个你img元素后,和包括它里面的非中断空格(有些浏览器将不会呈现它,如果它完全是空的)。

<div id="details-image">
    (some code)
    <img src="path/to/your/image.jpg" />
    <div class="anchor">&nbsp;</div>
</div>

这样做是因为加入了“clear”的元素,你强迫它被包含浮动元素,而是通过设置float:none,你这是它的非浮动父承认它,包括它。 clear属性会清楚浮动元素和之后呈现,并且由于line-heightfont-size0它不会添加任何额外的高度。我知道这一切听起来很奇怪,但给它一个去,我用这个方法在无表格布局所有的时间有很多浮动的div。

供参考:这里是从列表中除了关于CSS浮动的great read


0
投票

浮动“杀死”的高度计算莫名其妙:http://css-tricks.com/all-about-floats/解释了为什么(我发现这里对堆栈),并解释锄“清”工程

© www.soinside.com 2019 - 2024. All rights reserved.