1

私のウェブサイトのフォームページに3つのdivがあります。トグルボタンをクリックするたびに、左上のトグルが下のdivと重なっています。

私がやろうとしているのは、一番上のdivコンテナがクリックされると左下のdivコンテナが下に移動し、トグルが閉じられると元の位置に戻るということです。

私は正しいdivのcssを含めましたが、それがその横の2つのdivの位置に影響を与えるcssであるかどうかはわかりません。

トグルする前に

ここに画像の説明を入力してください

トグル後

ここに画像の説明を入力してください

ToggleのCSS

#toggle-view {
list-style:none;    
font-family:arial;
font-size:10px;
margin:0;
padding:0;
width:200px; 
position: absolute;
}

#toggle-view li {
    list-style:none;
    text-decoration:none;
    font-size:13px;
    font-family:'lato';
    padding:2px;
    margin:10px;
    margin-left:20px;
    position:relative;
    cursor:pointer; 
    border-radius: 5px;    
}

 #toggle-view li a:hover {
    color: brown;  
}

#toggle-view h3 {
    margin:0;
    font-size:13px;
    color:#2a5a9a;
}

#toggle-view span {
    position:absolute;
    right:5px; top:0;
    color:#2a5a9a;
    font-size:20px;
    font-weight: bolder;
}

#toggle-view p {
    margin:5px 0;
    display:none;
}

#toggle-view a{
    padding:5px 0;
    color:#35371c; 
}

#toggle-view a:hover{

     color:#2a5a9a;
}

LeftBoxのCSS

.report{
position: absolute;
margin-top:100px;
margin-left:0;
padding-left: 20px;
}

右ボックスのCSS

.register-body {
height:auto;
font-size:1em;
width:710px;
position:relative;
color:#000;
border-radius:5px;
background-color:#d2d4bb;
line-height:20px;         
margin:20px 0 20px 250px;
padding:15px 15px 0; 
}

着替えたら

#toggle-view {
position: absolute;
}

に

#toggle-view {
position: relative;
}

と

.report{
 position: absolute;
}

に

.report{
 position: relative;
 }

私はこれを得た ：

ここに画像の説明を入力してください

右のボックスは左下のボックスの下に押し込まれます。

アップデート

私のHTML

トグルの場合：

<ul id="toggle-view">
<li>
    <h3>Create View Comment</h3>
        <span>+</span>
            <p>
                <a href="forum.php">Forum Homepage </a><br>
                <a href="create-topic.php">Create Topic </a><br>
                <a href="view-topic.php">View Topics</a><br>
                <a href="forum-stat.php">Forum Stats</a><br>
            </p>
</li>

左下フォームの場合

<div class='headword'>Report A User</div>
     p>
    <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
          <?php
           $user = mysql_query("SELECT forum_id, username, first_name, last_name, email
             FROM forum_login ORDER BY username ASC") or die(mysql_error());

  echo"User <select name='username' class='tap_Select' title='User You Want To Report'>
                    <option value =''>    </option>";
                    while($row1 = mysql_fetch_array($user)){                                            
       echo '<option value="'.$row1['username'].'">'.$row1['username'].'</option>';} 
                       echo '</select>' ; ?><br>
   <select name="type" class="tap_Select" title='What Are You Reporting For'>
        <option value ="">    </option>
        <option value ="bullying">Bullying</option>
        <option value ="trolling">Trolling</option>
        <option value ="spamming">Spamming</option>
        </select> 
         <br>
        <textarea type="text" name="desc"  style="width:150px ; height: 100px;">

       </textarea><br>
       <input type="submit" name="submit1" class="tap1_Btn">
       </form>
4

2 に答える 2

3

あなたの完全なhtmlがなければ、私はそれがposition: absoluteあなたの.reportcssにあると言うでしょう。Absoluteは通常のレイアウトフローからそれを引き出し、値を1つトグル変更するか、またはでフローに戻さdivない限り、他のものが衝突するようにします。topposition: relativeposition: static

を削除しposition: absoluteて調整し、padding必要marginな場所に流れるようにします。

于 2012-09-15T04:22:57.563 に答える
1

ライブページを見た後に更新します。

<ul id="toggle-view"></ul><div class="report"></div>このようにdivを追加し、<div class="register-body"></div>それを外に置きます。

<div class="left_pane">
    <ul id="toggle-view">
        ...
    </ul>
    <div class="report">
        ...
    </div>
</div>
<div class="register-body">
...
</div>

.left_panecssに追加し、フローを設定します。

.left_pane {
    width: 200px;
    float: left;
}

あなたのにドロップposition: absolute;します#toggle-view。

.register-bodyを追加してfloat: left;に変更margin: 20px 0 20px 250px;するにはmargin: 20px 0 20px 20px;

そして、それはすべて大丈夫なはずです...

于 2012-09-15T04:32:47.967 に答える