2014-12-03 54 views
0

我有一個不尋常的問題,而定位divs在其他divs,我有我的主,一個孩子和兩個(孫子),現在的高度,以適應孩子的孫子我有定位他們通過浮動,浮動左和浮動權,而我的孩子是絕對定位,現在我的主寬度爲980px,並以margin 0爲中心居中,一切似乎工作正常......我注意到我的主沒有它的高度是0px,孩子很好,高度可以適當地調整到花車等,但我的最低沒有高度,如果我把它拿出來定位到屏幕左側,我將如何讓主要承認孩子,然後承認孫輩,請幫我已經嘗試清楚:都和明確:自動無效CSS Div定位 - 打破包裝高度

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

以爲我會提到,因爲Ricky Goldman說過,使用position:absolute的容器不會識別高度,我設法通過使用位置來實現我想要的:相對於包裝器和容器的浮動,然後在我使用的頁腳清晰:請參閱後面的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;} 

希望這可以幫助別人,謝謝你們

+0

您可以將此作爲答案,以便問題似乎得到解答? – Larz 2014-12-03 21:54:53

0

2個選項根據您的需要或者可以工作。

#main { overflow: hidden } 

這會導致在呈現時對容器邊界進行一種重置,然後它會識別浮動的子項。或...

#main { float: left } 

如果一個項目是浮動的,它將在形成框的邊界時識別浮動的子項。浮動:正確也可以;一方無所謂。

+0

我已經試過兩個人身上,它似乎爲我工作。問題似乎是,包裝div是不承認牆div – Ricky 2014-12-03 19:55:07

+1

你可以請你的HTML? – 2014-12-03 20:01:41

+0

我沒有意識到你指的是牆,因爲你的帖子提到浮動。容器將無法識別絕對定位元素的高度。如果你能做到沒有位置:絕對,它會找到高度。 – 2014-12-03 20:03:40

0

添加一個簡單的clearfix您div不具有高度(通常與浮動孩子的容器):

#wrapper:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 

哪裏#wrapper是您零高度的div的CSS選擇器。