ページの右上にロゴの下にバトムボーダーを配置する際に問題が発生する

ページの上部にあるロゴの下に境界線を置こうとしています。ページの右上にロゴの下にバトムボーダーを配置する際に問題が発生する

position:absolute;をdivに追加する前に、2つのロゴを連絡先の右下に表示したい場所に配置します。しかし、ページの左側の境界は、私はposition:absolute;を置くときにそれが動くが、ロゴはページを飛び降りる。

css #para { 
 
    margin-right: 1.66%; 
 
    float: right; 
 
    font-family: indie flower; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
} 
 

 
.fb { 
 
    width: 27px; 
 
    float: right; 
 
    right: 5px; 
 
    position: absolute; 
 
    margin-top: 3px; 
 
    top: 35px; 
 
} 
 

 
#in { 
 
    margin-top: 4px; 
 
    width: 25px; 
 
    float: right; 
 
    position: absolute; 
 
    right: 40px; 
 
    top: 35px; 
 
} 
 

 
div { 
 
    border-bottom: 1.5px solid red; 
 
    width: 60px; 
 
    right: 5px; 
 
    position: absolute; 
 
}

<p id="para">Contact me </p> 
 
<div> 
 
    <img class="fb" width="10" src="https://cdn3.iconfinder.com/data/icons/picons-social/57/46-facebook-512.png"> 
 
    <img id="in" width="25" src="https://image.flaticon.com/icons/png/512/69/69366.png"> 
 
</div>

出典

2017-07-06 alex92l1

ちょうどあなたの#paraとdivにfloat: rightを使用しています。 divが重複しないようにclear属性のある<span>を使用してください。いかなる絶対的な位置決めも必要ありません。これが分かるように、コードを単純化します。

.clear { 
    display: block; 
    clear: both; 
}

PS：divなどのタグにCSSを追加しないようにしてください。

#para { 
 
    margin-right: 1.66%; 
 
    float: right; 
 
    font-family: indie flower; 
 
} 
 

 
.clear { 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
.fb { 
 
    width: 27px; 
 
    margin-top: 3px; 
 
} 
 

 
#in { 
 
    margin-top: 4px; 
 
    width: 25px; 
 
} 
 

 
#icons { 
 
    float: right; 
 
    border-bottom: 1.5px solid red; 
 
    width: 60px; 
 
}

<p id="para">Contact me </p> 
 
<span class="clear"></span> 
 
<div id="icons"> 
 
    <img class="fb" src="https://cdn3.iconfinder.com/data/icons/picons-social/57/46-facebook-512.png"> 
 
    <img id="in" src="https://image.flaticon.com/icons/png/512/69/69366.png"> 
 
</div>

出典

2017-07-06 08:09:56 Rithwik

おかげで、病気に今それを試してみて、basicly私が何かをしようと、それは私のために働いた、私は外の画像を引き抜きますdivとdivのCSS todivを変更しました。{ \t border-bottom：1.5px赤色; \t幅：60px; \t右：5ピクセル; \tポジション：絶対; \t top：65px; \t margin-right：1.66％; \t} – alex92l1

うん、それを動作させる方法はたくさんあります。このアイデアは、最もシンプルでハードコーディングされていない方法のために行くことです。 'position：absolute'と' top'と他の属性をハードコーディングするのは面倒であり、非応答的なデザインを作り出します。 – Rithwik

@ alex92l1お手伝いがあれば正解にしてください。ありがとう。 – Rithwik

あなたが投稿したスニペットから（境界線を持っている）コンテナを移動していない間、あなたはアイコンが絶対位置決めされているので、それがかもしれように、それが見えます。

私は以下を推奨します。浮動小数点数とともにアイコンから絶対配置を削除し、代わりにアイコンコンテナを配置しました。

css #para { 
 
    margin-right: 1.66%; 
 
    float: right; 
 
    font-family: indie flower; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
} 
 

 
.fb { 
 
    width: 27px; 
 
    margin-top: 3px; 
 
} 
 

 
#in { 
 
    margin-top: 4px; 
 
    width: 25px; 
 
} 
 

 
.icon-container { 
 
    border-bottom: 1.5px solid red; 
 
    width: 60px; 
 
    right: 5px; 
 
    top: 0px; 
 
    position: absolute; 
 
}

<p id="para">Contact me </p> 
 
<div class="icon-container"> 
 
    <img class="fb" width="10" src="https://cdn3.iconfinder.com/data/icons/picons-social/57/46-facebook-512.png"> 
 
    <img id="in" width="25" src="https://image.flaticon.com/icons/png/512/69/69366.png"> 
 
</div>

出典

2017-07-06 08:18:59 CamBarker

これをチェックしてください。そしてクラスにより、一つのスタイル要素ではない ID

#left { 
 
\t margin-right: 1.66%; 
 
\t float: left; 
 
\t font-family: indie flower; 
 
\t top: 0px; 
 
\t right: 0px; 
 
    } 
 

 
.fb { 
 
\t width: 27px; 
 
    } 
 

 
#in { 
 
\t width: 25px; 
 
    } 
 

 
#right { 
 
\t float: right; 
 
\t text-align: center; 
 
\t border-bottom: 1.5px solid red; 
 
\t right: 5px; 
 
    }

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

 
<body> 
 
\t <div id="right"> \t 
 
\t \t <p>Contact me </p> 
 
\t \t <img id="in" width="25" src="https://image.flaticon.com/icons/png/512/69/69366.png"> 
 
\t \t <img class="fb" width="10" src="https://cdn3.iconfinder.com/data/icons/picons-social/57/46-facebook-512.png"> 
 
\t </div> 
 
</body> 
 
</html>

出典

2017-07-06 08:20:34 shahjahan

ページの右上にロゴの下にバトムボーダーを配置する際に問題が発生する

答えて

関連する問題