试图了解CSS中的大小 [英] trying to understand sizing in css
问题描述
你好，
我只是在尝试使用css，我不明白为什么在这个例子中，主箱的大小是水平的，但不是垂直的。有办法吗？
谢谢
<前lang =HTML> < < span class =code-leadattribute>！DOCTYPE html >
< HTML >
< HEAD >
< STYLE >
。 mainbox {
background-颜色 ： 黄色;
border ： solid 5px black;
min-width ： 100px;
max-width ： 300px;
< span class =code-attribute> min-height ： 100px;
max-height ： 300px;
padding ： 0px;
margin ： 0px;
top ： 100px;
left ： 100px;
position ： relative;
width ： auto;
height ： auto;
}
。 tall {
background-color ： lightgreen;
border ： 点缀2px绿色;
不透明度 ： 0.5;
filter ： alpha（opacity = 50）;
height ： 300px;
width ： 10px;
position ： 绝对值;
left ： 0px;
top ： 0px;
}
。 wide {
background-color ： 浅蓝色;
border ： 点缀2px蓝色;
不透明度 ： 0.5;
过滤器 ： alpha（opacity = 50）;
height ： 10px;
width ： 300px;
position ： 绝对值;
left ： 0px;
top ： 0px;
}
< / STYLE >
< / HEAD >
< BODY >
< DIV class = mainbox >
< DIV class = wide > < / DIV >
< DIV class
< span class =code-keyword>< / DIV >
< / BODY >
< / HTML > 试试这个链接
http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts [ ^ ]
将宽度和高度设置为百分比，而不是像素：
。 tall
{
background-color ： lightgreen;
border ： 点缀2px绿色;
不透明度 ： 0.5;
filter ： alpha（opacity = 50）;
height ： 100％;
width ： 10px;
position ： 绝对;
left ： 0px;
top ： 0px;
}
。 wide
{
background-color ： < span class =code-keyword> lightblue;
border ： < span class =code-keyword> dotted 2px blue;
opacity ： 0.5;
filter ： alpha（opacity = 50）;
height ： 10px;
width ： 100％;
position ： 绝对;
left ： 0px;
top ： 0px;
}
Refer- CSS定位 [ ^ ]
引用：绝对定位的元素可以与其他元素重叠。
所以，我只是从子div和ma中注释出。绝对定位来自父div的x高度
查看演示 - [演示] Div自动调整高度问题 [ ^ ]。
引用：//评论的CSS代码是
// ------------------------------------------
//在类.mainbox中，/ * max-height：300px; * /
//在类.tall中，/ * position：absolute; * /
//在课堂上.wide，/ *位置：绝对; * /
// --------------------- ---------------------
//经过这些修复，现在父div正确调整其高度根据儿童div。
Hello,
I'm just experimenting with css, and I don't understand why in this example the mainbox sizes to it's content horizontally, but not vertically. Is there a way to do this?
Thanks
<!DOCTYPE html>
<HTML>
<HEAD>
<STYLE>
.mainbox {
background-color:yellow;
border:solid 5px black;
min-width:100px;
max-width:300px;
min-height:100px;
max-height:300px;
padding:0px;
margin:0px;
top:100px;
left:100px;
position:relative;
width:auto;
height:auto;
}
.tall {
background-color:lightgreen;
border:dotted 2px green;
opacity:0.5;
filter:alpha(opacity=50);
height:300px;
width:10px;
position:absolute;
left:0px;
top:0px;
}
.wide {
background-color:lightblue;
border:dotted 2px blue;
opacity:0.5;
filter:alpha(opacity=50);
height:10px;
width:300px;
position:absolute;
left:0px;
top:0px;
}
</STYLE>
</HEAD>
<BODY>
<DIV class="mainbox">
<DIV class="wide"></DIV>
<DIV class="tall"></DIV>
</DIV>
</BODY>
</HTML>try this link
http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts[^]
Set your widths and heights to percentages, not pixels:
.tall { background-color:lightgreen; border:dotted 2px green; opacity:0.5; filter:alpha(opacity=50); height:100%; width:10px; position:absolute; left:0px; top:0px; } .wide { background-color:lightblue; border:dotted 2px blue; opacity:0.5; filter:alpha(opacity=50); height:10px; width:100%; position:absolute; left:0px; top:0px; }
Refer- CSS Positioning[^]
Quote:Absolutely positioned elements can overlap other elements.
So, I just commented outabsolutepositioning from the child divs andmax-heightfrom parent div.
Check out the Demo- [Demo] Div Auto Adjust Height Problem[^].
Quote:// Commented CSS Codes are
// ------------------------------------------
// In class ".mainbox", /*max-height:300px;*/
// In class ".tall", /*position:absolute;*/
// In class ".wide", /*position:absolute;*/
// ------------------------------------------
// After these fixes, now parent div adjusts its height correctly according to the child divs.
这篇关于试图了解CSS中的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
