画像が上に移動しませんか？

私は2つの画像を持っています。 1つはうまく動き、フロートを使用しました。私はそのdivの花を呼び出しました。しかし、2番目の画像は動きたくない。私はそのdivを「野蛮な」と呼んだ。私はそれを右に浮かべたので、うまくいきました。問題はそれをより高くすることです。私はposition：absolute、position：relative、そしてbottomとtopを使って試しました。それは動きたくない。私はマージン、パディングを試していて、おそらく他のマージンが途中であったかもしれないと思っている。何もない。ここで画像が上に移動しませんか？

は、それが見ているかのSCREENCAPである：ここで

はhtmlコードです：

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>question reality.</title> 
    <link rel="stylesheet" type="text/css" href="intro-page.css"> 
    </head> 

    <body> 

     <div class="container"> 
      <center> 
       <img src="https://i.imgur.com/10iUAyi.gif"> 
      </center> 
     </div> 

     <div class="text-center"> 
      <div class="light"> 
       <button> 
        <a href="http://google.com">Light</a> 
       </button> 
      </div> 
      </button> 
      <div class="dark"> 
       <button> 
        <a href="http://google.com">Dark</a> 
       </button> 
      </div> 
     </div> 


     <div class="flowers"> 
      <img src="https://i.imgur.com/rOLqQ48.jpg"> 
     </div> 

     <div class="barbed"> 
      <img src="https://i.imgur.com/SukIIZ6.jpg"> 
     </div> 

    </body> 
    </html>

、ここでは、CSSです：

body{ 
background-color:black; 
} 


.text-center{ 
margin-left:580px; 

} 

.container{ 
padding-top:200px; 
} 

.light a{ 
color:black; 
text-decoration:none; 
} 

.light a:hover{ 
background-color:black; 
color:white; 
padding:5px; 
} 

.light button{ 
background-color:white; 
color:black; 
font-size: 30px; 
border-radius: 12px; 
float:left; 

} 

.dark a{ 
color:white; 
text-decoration:none; 
} 

.dark a:hover{ 
background-color:white; 
color:black; 
padding:2px; 
} 

.dark button{ 
background-color:black; 
color:white; 
font-size:30px; 
border-radius:12px; 
float:left; 
margin-left:15px; 

} 

.dark{ 
text-align:center; 
} 

.light{ 
text-align:center; 
} 

.flowers{ 
float:left; 
width:100%; 
position:absolute; 
bottom:100px; 
left:200px; 
} 

.barbed{ 
float:right; 
width:100% 
position:absolute; 
bottom:300px; 

}

出典

2017-07-11 Isabella.

ファーストの中にwidth:100%の後ろにセミコロンがあります。cssだから、divを動かすことができないのです。そのセミコロンを追加すると、あなたの好みに合わせてdivを動かすことができ、あなたの質問に答えるはずです。

.barbed{ 
float:right; 
width:100%; 
position:absolute; 
bottom:300px; 
}

あなたがここにあるレイアウトにはかなりの問題があると言われています。まず、不要なマークアップがたくさんあることです。 div内のすべてをラップする必要はありません。要素にクラスを追加し、そこからスタイルやスタイルを設定することができます。次に、floatが全く何もしないように絶対配置を使用しているので、.barbedと.flowers divから浮動小数点数を削除できます。 div内に要素をラップし、そのdivを相対的な位置に配置し、絶対的にウィンドウ内に配置するのではなくdivに絶対的に配置することも考えてください。次に、ブラウザウィンドウのサイズを小さくすると、レイアウトが破損する可能性が高くなります。誰かがモバイルブラウザでこれを開くと、問題が発生します。もし私があなただったら、私は次のようなものを試してみるでしょう。私はちょうどこれを実際に素早く入力して、それほど多くはテストしませんでしたが、あなたが将来どのような問題に遭遇する可能性があるかを知るには良い出発点になるはずです。

body{ 
 
    background:black; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.container{ 
 
    position:relative; 
 
    height:100vh; 
 
    min-height:400px; 
 
} 
 
.container-content{ 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
    text-align:center; 
 
} 
 
.container-content img{ 
 
    display:block; 
 
} 
 
a.light{ 
 
    background-color:white; 
 
    color:black; 
 
    font-size: 30px; 
 
    border-radius: 12px; 
 
    text-decoration:none; 
 
    display:inline-block; 
 
    margin:10px; 
 
} 
 
a.dark{ 
 
    background-color:black; 
 
    color:white; 
 
    font-size:30px; 
 
    border-radius:12px; 
 
    text-decoration:none; 
 
    display:inline-block; 
 
    margin:10px; 
 
} 
 
.flowers{ 
 
    position:absolute; 
 
    top:20px; 
 
    left:20px; 
 
    width:30%; 
 
} 
 
.barbed{ 
 
    position:absolute; 
 
    bottom:20px; 
 
    right:20px; 
 
    width:30%; 
 
}

<div class="container"> 
 
    <img class="flowers" src="https://i.imgur.com/rOLqQ48.jpg"/> 
 
    <img class="barbed" src="https://i.imgur.com/SukIIZ6.jpg"/> 
 
    <div class="container-content"> 
 
     <img src="https://i.imgur.com/10iUAyi.gif"/> 
 
     <a class="light" href="#">Light</a> 
 
     <a class="dark" href="#">Dark</a> 
 
    </div> 
 
</div>

出典

2017-07-11 17:23:54

それは笑いつも私が欠けているセミコロンのような愚かなささいなことです。修正しなければならないコードの欠陥について教えていただきありがとうございます。私は間違いなく初心者で、このように私をより良くする情報です。 –

画像が上に移動しませんか？

答えて

関連する問題