我在将div放在其他div中时有一个不寻常的问题,我有我的主,一个孩子和两个(孙子),现在为了孩子的高度调整到孙子我已经通过浮动定位他们,浮动左并向右浮动,我的孩子位于绝对位置,现在我的主要宽度为980px并且以0自动边距为中心,一切似乎工作正常...我注意到我的主要没有高度它是0px,孩子很好,高度适当调整浮子等,但我的min没有高度,如果我拿出它定位到屏幕的左边,我怎么会让主要识别孩子,然后识别孙子,请帮助我尝试清楚:两者都清楚:自动无济于事
CSS:
#wrapper {
margin: 0 auto;
width: 980px;
}
#wall {
width: 980px;
position: absolute;
box-shadow: 0px 0px 10px 0px;
border-radius: 50px;
}
#left {
width: 610px;
padding: 15px;
float: left;
}
#leftimg {
border-radius: 35px;
float: right;
width: 300px;
height: 200px;
padding: 8px;
}
#right {
border: 1px solid black;
width: 310px;
left: 645px;
padding: 5px;
float: right;
}
footer {
text-align: center;
<!DOCTYPE html>
<h1>Top Tips for your C.V</h1>
<p>Follow these tips, No messing straight to the point</p>
<img src="web-pics/check.png" alt="checksheet"/>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">page 1</a></li>
<li><a href="#">page 2</a></li>
<li><a href="#">page 3</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<div id="wall">
<div id="right">
<h2><u>Interactive</u></h2>
<p>aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaaaaaaaa
aaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa
aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa
aaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa
aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaa
aaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaa
aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
aaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaa aaa
aaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaa
aaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa
aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaaaaaaaa
aaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa
aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa
aaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaa
aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaa
aaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaa
aaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaa
aaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaa aaa
aaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaa
aaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaa
aaa
</p>
</div>
<div id="left">
<h1><u>Why do we need a CV?</u></h1>
<img src="web-pics/despair.jpg" alt="Despair" id="leftimg" />
<p>
Believe it or not, some people do not actually have a C.V, They believe that it is too much effort
and that it is not worth the time putting one together. Well this could not be further from the truth,
Indeed an employer will only look at your C.V briefly, so you may ask yourself what is the point in putting
all that information on there if they are not going to read it properly. An employer is looking for something
that will catch their eye, then they skim it over a little bit more, they look at your previous experience,
and if they are still looking, they will want your contact details. A C.V is the first potential step into employment,
Get this right and you may have yourself an Interview.
</p>
<h2><u>C.V Layout</u></h2>
<p>
The most important thing about your C.V is not so much the content, but how you have your layout.
This is at least to start with, Remember that it needs to catch the eye of the person reading it.
Unless you are applying for a role as a graphic designer, do not insert pictures, colours or other
funny gimmicks, it needs to catch their eye and look professional. Use the page to your advantage though,
The paper is white, the font is black, this can be a dull setting to start off with, why can't you add any
colour to it, Think of it like this, you can add as much colour to it and images and other funny captions,
but if the content is not as fulfilling as the colours, Then the employer may wish to employ someone who has
taken the time to make their C.V Content an easier read, it can be difficult to read a C.V if it has clashing colours.
</p>
</div>
</div>
</div>
<footer>
<br />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
</footer>
答案 0 :(得分:0)
根据您的需要,2个选项可以起作用。
#main { overflow: hidden }
这会在渲染时导致对容器边界的某种重置,然后它会识别浮动的子节点。还是......
#main { float: left }
如果某个项目浮动,它将在形成框的边界时识别其浮动的子项。浮动:权利也会起作用;这方面并不重要。
答案 1 :(得分:0)
为没有高度的div
添加一个简单的clearfix(通常是一个带有浮动子项的容器):
#wrapper:after {
content: '';
display: table;
clear: both;
}
其中#wrapper
是零高度div的CSS选择器。
答案 2 :(得分:0)
我想提到Ricky Goldman说,使用position:absolute的容器不会识别高度,我设法通过使用position来实现我想要的东西:相对于包装器和浮动容器,然后在页脚中我用过clear:请看下面的CSS。这让我得到了我想要的效果。谢谢你们......
#wrapper {
margin: 0 auto;
width: 980px;
position: relative;}
#wall {
width: 980px;
box-shadow: 0px 0px 10px 0px;
border-radius: 50px;
float: left;}
#left {
width: 610px;
padding: 15px;
float: left;
background-color: white;}
#leftimg {
border-radius: 35px;
float: right;
width: 300px;
height: 200px;
padding: 8px;}
#right {
width: 310px;
left: 645px;
padding: 5px;
float: right;
background-color: white;}
footer {
text-align: center;
clear: both;}
希望这可以帮助别人并感谢他们