2013-08-12 97 views
0

我有一個框中有另一個框,類似於側邊欄。但是,無論我爲側邊欄框設置的高度如何,它都不會位於頂部並與其他位置合併。我找到的唯一解決方案是設置一個頁邊空白負值,但這不會真正起作用,因爲我沒有.box_stanga的固定高度。請注意,#recent_vizualizate是側欄的名稱,而.box_stanga是其容器框的名稱。兩者都包含在#wrapper中。下面是代碼:保證金的負值

.box_stanga 
{ 
    margin-top: 5%; 
    padding: 0px 0px 20px 0px; 
    border: 1px solid #333; 
    box-shadow: 0px 0px 5px 2px #999999; 
    border-radius: 0px 10px 10px 10px; 
    background-color:white; 
    width: 100%; 

} 

#recent_vizualizate 
{ 
    top: 0px; 
    float: right; 
    /*margin-left: 20%;*/ 
    position:relative; 
    border: 1px solid #333; 
    box-shadow: 0px 0px 5px 2px #999999; 
    border-radius: 0px 10px 10px 0px; 
    width: 20%; 
    height: 100%; 
    margin-top: -600px; 
} 

#wrapper{width:1080px; margin:0 auto;} 

生成的HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <title>RevelioninRomania.ro</title> 
    <link rel="shortcut icon" type="image/x-icon" href="images/animated_favicon1.gif"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 


    <link rel="stylesheet" href="photo/css/ReMooz.css" type="text/css" media="screen" charset="utf-8" /> 
    <link rel="stylesheet" href="photo/css/layout.css" type="text/css" media="screen" charset="utf-8" /> 
    <link rel="stylesheet" href="photo/css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" /> 
    <script src="photo/scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script> 
    <script src="photo/scripts/mootools-1.2-more.js" type="text/javascript"></script> 
    <script src="photo/scripts/jd.gallery.js" type="text/javascript"></script> 




</head> 
<body> 

<!-- Meniu --> 
<tr><td style="vertical-align:top"> 
<ul class="menu"> 
    <li><a href="index.php" class="active"><span><b>Cauta oferta</b></span></a></li> 
    <li><a href="adauga.php"><span><b>Adauga oferta</b></span></a></li> 
    <li><a href="contact.php"><span><b>Contact</b></span></a></li> 
</ul> 
</tr></td> 
<div id="wrapper"> 
     <script type="text/javascript"> 
      function startGallery() { 
       var myGallery = new gallery($('myGallery'), { 
        timed: true 
       }); 
      } 
      window.addEvent('domready',startGallery); 
     </script> 
       <br> 
      <div class="box_stanga"> 
      <div id="myGallery"> 
           <div class="imageElement">    
        <a href="#" title="open image" class="open"></a> 
        <img src="photo/images/5207ffe15b8d8/1.jpg" style="width:480px; height:345px;" /> 
        <img src="photo/images/5207ffe15b8d8/1-mini.jpg" class="thumbnail" /> 
       </div> 

      </div> 

     <br/><br/><br/><br/><h1 >Lupul Vesel</h1><br/>Restaurant<br/>Judet: Gorj<br/>Localitate: Targu-Jiu<br/>Strada: <br/>Numar: 0<br/>Telefon: <br/>Fax: <br/>E-mail: <br/>Website: <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/><br/><div id='recent_vizualizate'><p class='center'>Recent vizualizate</p></div></div>&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:history.back()'><img src='images/back.png' id='back'></a><br/>  </div> 

     <div id="footer"> 
    Acest site nu salveaza date de tip cookie in calculatorul dumneavoastra. Copyright &copy; 2013 - 2013 RevelioninRomania.ro. Toate drepturile rezervate. 
</div> </body> 
</html> 

,你看到的是我們的照片庫的其他div的,他們不以任何方式影響側邊欄。

請讓我知道你是否需要任何東西,或者如果我需要編輯我的帖子,而不是downvoting。謝謝!

+0

也發佈相關的html代碼。然後如果可能的話做一個小提琴。 –

+0

建議不要使用百分比的margin-top和margin-bottom值,因爲百分比值將與父元素的** width **相關,而不是** height **。 –

+0

如果您要將元素放置在當前位置之外,請使用position:fixed或position:absolute。是的,請小提琴。 – Angela

回答

0

試着給它一個相對的位置。像這樣:

.box_stanga 
{ 
    margin-top: 5%; 
    padding: 0px 0px 20px 0px; 
    border: 1px solid #333; 
    box-shadow: 0px 0px 5px 2px #999999; 
    border-radius: 0px 10px 10px 10px; 
    background-color:white; 
    width: 100%; 

} 

#recent_vizualizate 
{ 
    top: -600px; 
    float: right; 
    /*margin-left: 20%;*/ 
    position:relative; 
    border: 1px solid #333; 
    box-shadow: 0px 0px 5px 2px #999999; 
    border-radius: 0px 10px 10px 0px; 
    width: 20%; 
    height: 100%; 
    /* -- margin-top: -600px; -- Do Not Use */ 
    position: relative; 
} 

#wrapper{width:1080px; margin:0 auto;} 

我還沒有測試過,但讓我知道,如果這對你有用。如果你使用'px'作爲你的高度和寬度以及你的利潤率,那將是最好的。

+0

產生相同的效果。是否有沒有辦法將100%的高度定義爲recent_vizualizate id,並使其獲取其父級box_stanga類的高度? – SporeDev

+0

那麼你的父母是.box_stanga?如果是這樣的話,爲父元素指定一個高度,並簡單地讓子元素的高度爲auto。讓我知道這是否有幫助;) – Hybrid82