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 に答える