Bild nicht innerhalb div

Meine Divs sind perfekt ausgerichtet. Ich versuche, ein Bild in der Mitte Div hinzuzufügen, aber sobald ich das Bild hinzufügen die Divs verschwinden und das Bild wird nicht angezeigt. Ich habe das Problem mit dem Hinzufügen des Bildes, kann jemand bitte helfen. Warum zeigt mein Bild nicht, was mit meinem Code falsch ist? Bild nicht innerhalb 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>

Quelle

2017-01-09 CrazyCoder

Wie wollen Sie sie ausgerichtet? selbe Größe? ein div unter dem anderen, wenn die Breite für beide zu klein ist und sie nach links schweben lassen? – KujAslani

Ich möchte sie ausgerichtet 1 ---- 2 ----- 3 zwei Seiten sollte eine wie 15px sein und die mittlere sollte die breiteste sein. – CrazyCoder

Haben Sie so etwas wie dies ausprobiert?

.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>

Quelle

2017-01-09 15:52:56 andrixb

Hallo, vielen Dank für die Unterstützung. Ich möchte, dass die grüne in der Mitte ist und die breiteste und die beiden anderen in den Seiten mit der gleichen Breite sind. Wenn ich das Code-Snippet ausführe, ist das grüne auf der linken Seite ausgerichtet und die anderen zwei grauen haben unterschiedliche Größe. – CrazyCoder

Ich sehe Ihren Standpunkt und tatsächlich, indem Sie den Code direkt im Browser ausgeführt hat, hat gut funktioniert. Selbst die Lösung hier unten scheint ziemlich gleich zu sein. – 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>

Quelle

2017-01-09 16:01:01

Hallo, ich weiß nicht, warum, aber wenn Sie den gleichen genauen Code verwenden, der genau funktioniert, scheinen alle meine Divs vertikal nebeneinander ausgerichtet zu sein. – CrazyCoder

Haben Sie meinen Code angewendet oder etwas falsch gemacht, überprüfen Sie bitte richtig –

yeah Ich habe alles doppelt überprüft – CrazyCoder

Ermöglicht folgende Weise versuchen:

<!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>

Quelle

2017-01-09 16:30:45 Hanif

meine ganze Seite ist leer :( – CrazyCoder

Bild nicht innerhalb div

Antwort

Verwandte Themen