0

我有一个盒子，里面有另一个盒子，类似于侧边栏。但是，无论我为侧边栏框设置的高度如何，它都不会位于顶部并与另一个框合并。我发现的唯一解决方案是设置一个 margin-top 负值，但这不会像我想要的那样真正起作用，因为我没有 .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 用于照片库，它们不会以任何方式影响侧边栏。

如果您还需要什么，或者我是否需要编辑我的帖子而不是投反对票，请告诉我。谢谢！

4

1 回答 1

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' 作为高度和宽度以及边距。

于 2013-08-12T09:27:11.543 回答