我有一個框中有另一個框,類似於側邊欄。但是,無論我爲側邊欄框設置的高度如何,它都不會位於頂部並與其他位置合併。我找到的唯一解決方案是設置一個頁邊空白負值,但這不會真正起作用,因爲我沒有.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/> <br/><br/><div id='recent_vizualizate'><p class='center'>Recent vizualizate</p></div></div> <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 © 2013 - 2013 RevelioninRomania.ro. Toate drepturile rezervate.
</div> </body>
</html>
,你看到的是我們的照片庫的其他div的,他們不以任何方式影響側邊欄。
請讓我知道你是否需要任何東西,或者如果我需要編輯我的帖子,而不是downvoting。謝謝!
也發佈相關的html代碼。然後如果可能的話做一個小提琴。 –
建議不要使用百分比的margin-top和margin-bottom值,因爲百分比值將與父元素的** width **相關,而不是** height **。 –
如果您要將元素放置在當前位置之外,請使用position:fixed或position:absolute。是的,請小提琴。 – Angela