div内に画像が表示されない

My Divsは完全に配置されています。私は中央のdivに画像を追加しようとしていますが、画像を追加するとdivが消えて画像が表示されなくなります。イメージを追加する際に問題が発生しました。誰かが助けてください。なぜ自分の画像に私のコードに何が間違っているのか見せてくれないのですか？div内に画像が表示されない

<style> 
 

 
.div_parent{ 
 

 
    display:inline; 
 
background-image: url('../images/image.jpg') top center no-repeat;" 
 

 
    } 
 
    
 
.div_center { 
 

 

 
    width:300px; 
 
    float:left; 
 
    border-color:black; 
 
    border-style:solid; 
 
    border-width:3px; 
 
    height :700px 
 
} 
 

 
.div_right 
 
{ 
 
    background-color:#edeeef; 
 
    border-color:black; 
 
    border-style:solid; 
 
    border-width:3px; 
 
    width: 150px; 
 
    float:left; 
 
    height:100% 
 
} 
 
.div_left 
 
{ 
 
    background-color:#edeeef; 
 
    border-color:black; 
 
    border-style:solid; 
 
    border-width:3px; 
 
    width: 150px; 
 
    float:left; 
 
    height:100% 
 
} 
 

 

 
</style>

<div class="div_parent"> 
 

 

 
<div class="div_left"> 
 
<br /><br /><br /><br /><br /><br /> 
 
\t \t \t \t \t \t \t <FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG>Welcome to the Reporting Portal! </STRONG> </font><br /> 
 
\t \t \t \t \t \t \t <br /> 
 
\t \t \t \t \t \t <FONT size="2" style="font-family:sans-serif; text-align: left;"> \t 
 
\t \t \t \t \t Reports on this site are available as view-only or as an Excel download. </font> 
 
</div> 
 
<div class="div_center"> 
 

 

 
</div> 
 

 
<div class="div_right"> 
 
<br /><br /><br /><br /><br /><br /> 
 
<FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG> We're Here to Help! </STRONG> </font><br /><br /> 
 
\t \t \t \t \t \t \t 
 
<FONT size="2" style="font-family:sans-serif; text-align:left;"> \t 
 
We're friendly and available to chat. Reach out to us anytime and we'll happily answer your questions.</br><br /> 
 
Supervisors should submit requests including specific fields and search criteria to us at Report Manager</a></font> 
 

 
</div> 
 
</div>

出典

2017-01-09 CrazyCoder

を？同じ高さですか？両方のために幅が小さすぎるときにもう一方の下に1つのdivがあり、それらを左に浮かせますか？ – KujAslani

私はそれらを整列させたい1 ---- 2 ----- 3 2面1つはそれぞれ15pxのようにすべきであり、中間のものは最も広いべきである。 – CrazyCoder

あなたはこのような何かを試してみたことがありますか？

.container { 
 
    width: 100%; 
 
    height: 50px; 
 
    display: inline-block; 
 
} 
 
.element__left, 
 
.element__right, 
 
.element__center { 
 
    height: 50px; 
 
} 
 
.element__left, .element__right { 
 
    width: 25%; 
 
    float: left; 
 
    background-color: grey; 
 
} 
 
.element__center { 
 
    width: 50%; 
 
    float: left; 
 
    background-color: green; 
 
}

<div class="container"> 
 
    <div class="element__left"> 
 
    <div class="element__center"> 
 
    <div class="element__right"> 
 
</div>

出典

2017-01-09 15:52:56 andrixb

こんにちは、ありがとうございました。私は緑色のものを中央に置き、最も幅の広いものと同じ幅のものを他の2つのものにしたい。私がコードスニペットを実行すると、緑色のものは左側に整列され、他の2つの灰色のものはサイズが異なります。 – CrazyCoder

私はあなたのポイントを参照して、実際にすぐにブラウザですぐにコードを実行することによってうまくいきました。ここのソリューションでさえ、ほぼ同じように見えます。 – andrixb

.divOuter{ 
 
     display:inline; 
 
     text-align:center; 
 
    } 
 

 
    .divInner1{ 
 
     border: 1px solid; 
 
     float:left; 
 
     width:150px; 
 
     height:150px; 
 
     margin-left:3px; 
 
     margin-right:3px; 
 
    } 
 
.divInner2{ 
 
     border: 1px solid; 
 
     float:left; 
 
     width:250px; 
 
     height:150px; 
 
     margin-left:3px; 
 
     margin-right:3px; 
 
    } 
 
.divInner3{ 
 
     border: 1px solid; 
 
     float:left; 
 
     width:150px; 
 
     height:150px; 
 
     margin-left:3px; 
 
     margin-right:3px; 
 
    }

<body> 
 
<div class='divOuter'> 
 
    <div class='divInner1'>First DIV</div> 
 
    <div class='divInner2'>Second DIV</div> 
 
    <div class='divInner3'>Third DIV</div> 
 
</div> 
 
</body>

出典

2017-01-09 16:01:01

こんにちは、私はなぜ知っているのかわかりませんが、あなたが正確に動作しているように見えるのと同じ正確なコードを使用すると、すべてのdivが横並びでなく縦に並べられます。 – CrazyCoder

私のコードを適用しましたか間違っているか正しくチェックしてください –

ええ、私はすべてダブルチェックしました – CrazyCoder

次のように試すことができます：あなたがそれらを揃えたいですどのように

<!DOCTYPE html> 
<html class="not-ie" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>aligning 3 divs with different widthst</title> 
<style type="text/css"> 
    * { padding:0; margin:0;} 
    body { font-family:Arial, Helvetica, sans-serif; color:#fff; font- size:16px;} 
    .div_parent { position:relative; width:100%; height:300px; overflow:auto; line-height:300px; text-align:center;} 

    .div_left { position:absolute; left:0; top:0; height:100%; background-color:#900; width:150px;} 
    .div_middle { position:absolute; left:150px; right:150px; top:0; height:100%; overflow:auto; background-color:#00F;} 
    .div_right { position:absolute; right:0; top:0; height:100%; background-color:#900; width:150px;} 

</style> 
</head> 

<body> 
    <div class="div_parent"> 
     <div class="div_left">width: 100px;</div> 
     <div class="div_middle">width: screen - 200px;</div> 
     <div class="div_right">width: 100px;</div> 
    </div> 
</body> 
</html>

出典

2017-01-09 16:30:45 Hanif

私の全ページが空白です:( – CrazyCoder

div内に画像が表示されない

答えて

関連する問題