2

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

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

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

トグル前

ここに画像の説明を入力

トグル後

ここに画像の説明を入力

トグル用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;
}

左ボックスの 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;
 }

私はこれを得た ：

ここに画像の説明を入力

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

4

1 に答える 1

4

絶対位置を使用しているためです。絶対配置せずにレイアウトを試してみると、あなたの全能の意志で動いたり、曲がったり、曲がったりします！:)

于 2012-09-13T21:46:26.150 に答える