元素的高度 [英] Height of an element
问题描述
大家好，
我有一个页面设置文本集团（div有边距，背景颜色等）。
对于其中一个块，我需要两列。它们的高度是不可预测的。
这个简单的CSS是一个包含两个div的div，用于两个位置中的每一个：绝对设置每列的水平维度。 （我也尝试浮动，显示内联...）
问题是，每次，包含两个div的div出现在下面的文本块上方，而我的包含块的高度为零。
以下是代码：
< style type =" text / css"><！ -
/ * -------阻止文字< div> ------- * /
.bloc {width：600px;
margin-left：auto;
margin-right：auto;
padding-top：1.5％;
padding-bottom：1.5％;
text-align：justify;
}
- >< / style>
< div class =" bloc" style ="
background-color：＃ffB0B0;">
< p> www< / p>
< / div>
< div class =" bloc" style ="
padding-top：0％;
padding-bottom：0％;
">
< div class =" bloc" style ="
background-color：#ffff00;
position：absolute;
left：0％;
宽度：50％
">
< p> xxx< / p>
< / div>
< div class =" bloc" style ="
background-color：＃00ff00;
position：absolute;
left：50％;
宽度：50％
">
< p> yyy< / p>
< / div>
< / div>
< div class =" bloc" style ="
background-color：#ffffff;">
< p> zzz< / p>
< / div>
在示例中，黄色和绿色块应出现在白色和粉红色块之间，而不是白色块之上。 （在更多的黄色块应与其他人的左边缘对齐）
如果你有办法解决这个问题，谢谢。
Richard
Hello all,
I have a page setup with blocs of texts (div with margins, background colors and all).
For one of these blocks, I need two columns. Their height is not predictible.
The simple CSS for this is a div which contains two divs, using for each of the two position:absolute to set the horizontal dimentions of each columns. (I also tried float, display inline...)
The problem is that each time, the two contained divs appear above the following text block, and my containing block has a zero height.
Here is the code:
<style type="text/css"><!--
/*------- block text <div>-------*/
.bloc { width: 600px;
margin-left: auto;
margin-right: auto;
padding-top: 1.5%;
padding-bottom: 1.5%;
text-align: justify;
}
--></style>
<div class="bloc" style="
background-color:#ffB0B0;">
<p>www</p>
</div>
<div class="bloc" style="
padding-top: 0%;
padding-bottom: 0%;
">
<div class="bloc" style="
background-color:#ffff00;
position: absolute;
left:0%;
width:50%
">
<p>xxx</p>
</div>
<div class="bloc" style="
background-color:#00ff00;
position: absolute;
left:50%;
width:50%
">
<p>yyy</p>
</div>
</div>
<div class="bloc" style="
background-color:#ffffff;">
<p>zzz</p>
</div>
In the example the yellow and green blocks should appear between the white and pink block, not above the white block. (In more the yellow block should be aligned witht he left margin of the others)
Thank you if you have a method to fix this.
Richard
推荐答案
嗨理查德，
您是否将整体设置为100％？
如果你这样做 - 你可以将Div'设置为任何百分比！
Leo
Hi Richard,
Did you set the overall body to 100%?
If you do that - you can set Div''s to be any percentage of that!
Leo
嗨理查德，
您是否将整体设置为100％？
如果您这样做 - 您可以将Div'设置为任何百分比！
Leo
Hi Richard,
Did you set the overall body to 100%?
If you do that - you can set Div''s to be any percentage of that!
Leo
感谢您的帮助！但是：
做身体{身高：100％}什么都不做。
做< div style"身高： 100％">对于包含div，如果填充页面。
做< div style" height：100％">对于包含的div，使它们填满页面。
所以它不起作用......
我的直觉告诉我，我们需要在包含div中设置一些东西，但是什么？
Thank you for helping! But:
Doing body { height: 100%} changes nothing.
Doing <div style "height:100%"> for the containing div makes if fill the page.
Doing <div style "height:100%"> for the contained divs make them fill the page.
So it don''t work...
My intuition tells me that we need to set something into the containing div, but what?
将其设置为html，body {height：100％}但我还没有研究过这个问题。
Set it as html,body{height:100%} but I have not studied the problem.
这篇关于元素的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
