CSS Div Positioning - 打破包装纸高度

时间:2014-12-03 19:40:32

标签: css

我在将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>

3 个答案:

答案 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;} 

希望这可以帮助别人并感谢他们