Relative Positionierung mit Höhe basierend auf dem Inhalt Probleme

Question

Hallo Ich versuche, das Sie

So kann in diesem Fall zu erreichen sehen, haben wir 3 divs. Die oberste hat eine Breite von 100% und eine Höhe: auto. Wird natürlich auch relativ positioniert sein.

Zweite gleich, aber in diesem Fall werde ich einen Dummy-Text hinzufügen, der die Höhe des div definieren wird.

Und die dritte wie die erste, das Problem ist, dass sie nicht ausgerichtet sind. Nicht eins vor dem anderen. Könnte mir jemand sagen, was mit meinem Code nicht stimmt? Dank

#block1 { 
 
    position:relative; 
 
    width:100%; 
 
    height:auto; 
 
    background-color: blue; 
 
} 
 

 
#img1 { 
 
    width:100px; 
 
    height:100px; 
 
    position:absolute; 
 
    left:50%; 
 
    transform:translate(-50%); 
 
    -webkit-transform:translate(-50%); 
 
} 
 

 
#block2 { 
 
    position:relative; 
 
    width:100%; 
 
    height:auto; 
 
    background-color: orange; 
 
} 
 

 
.dummytext { 
 
    font-family: 'Ralleway, sans-serif'; 
 
    font-size: 20px; 
 
    text-align: justify; 
 
    margin:10px; 
 
} 
 

 
#block3 { 
 
    position:relative; 
 
    width:100%; 
 
    height:auto; 
 
    background-color: brown; 
 
} 
 

 
#img2 { 
 
    width:100px; 
 
    height:90px; 
 
    position:absolute; 
 
    left:50%; 
 
    transform:translate(-50%); 
 
    -webkit-transform:translate(-50%); 
 
}

<div id="block1"> 
 
    <img src="images/img1.png" id="img1"/> 
 
</div> 
 

 
<div id="block2"> 
 
    <h3 class="dummytext">Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, </h3> 
 
</div> 
 

 
<div id="block3"> 
 
    <img id="img2" src="images/img2.png"/> 
 
</div>

Könnte jemand mir helfen, zu verstehen?

Answer 1

Ihre Elemente werden nicht angezeigt, da die Eigenschaft position auf ihnen festgelegt wurde. Fügen Sie table Elemente um die img-Tags hinzu, und setzen Sie die margin: auto-Eigenschaft auf ihnen.

#block1 { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: blue; 
 
} 
 
#img1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    left: 50%; 
 
    transform: translate(-50%); 
 
    -webkit-transform: translate(-50%); 
 
} 
 
#block2 { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: orange; 
 
} 
 
.dummytext { 
 
    font-family: 'Ralleway, sans-serif'; 
 
    font-size: 20px; 
 
    text-align: justify; 
 
    margin: 10px; 
 
} 
 
#block3 { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: brown; 
 
} 
 
#img2 { 
 
    width: 100px; 
 
    height: 90px; 
 
    left: 50%; 
 
    transform: translate(-50%); 
 
    -webkit-transform: translate(-50%); 
 
} 
 
table { 
 
    margin: auto; 
 
}

<div id="block1"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <img id="img1" src="images/img1.png"></td></tr></tbody><table> 
 
</div> 
 

 
<div id="block2"> 
 
    <h3 class="dummytext">Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, </h3> 
 
</div> 
 

 
<div id="block3"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <img id="img2" src="images/img2.png"></td></tr></tbody><table> 
 
</div>

Answer 2

Dies liegt daran, dass das Bild absolut positioniert ist und nicht zur Größe des Containers beiträgt. Sie sollten die absolute Position des Bildes entfernen.

Try this:

div { 
 
    text-align: center; /* center everything inside the divs */ 
 
} 
 
#block1 { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: blue; 
 
} 
 
#img1 { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
#block2 { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: orange; 
 
} 
 
.dummytext { 
 
    font-family: 'Ralleway, sans-serif'; 
 
    font-size: 20px; 
 
    text-align: justify; 
 
    margin: 10px; 
 
} 
 
#block3 { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: brown; 
 
} 
 
#img2 { 
 
    width: 100px; 
 
    height: 90px; 
 
}

<div id="block1"> 
 
    <img src="images/img1.png" id="img1" /> 
 
</div> 
 

 
<div id="block2"> 
 
    <h3 class="dummytext">Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, </h3> 
 
</div> 
 

 
<div id="block3"> 
 
    <img id="img2" src="images/img2.png" /> 
 
</div>

Answer 3

Um das Layout Ihres divs zu steuern sollten Sie ihnen eine Anzeige Immobilie geben. Versuchen Sie, display: table-row; für jeden Block

Answer 4

Sie müssen keine absolute Positionierung verwenden, um dies zu erreichen. Es ist einfacher (und sicherer) die statische Standard-Positionierung und Zentrum Dinge margin: 0 auto wie so mit verwenden:

#block1 { 
width:100%; 
background-color: blue; 
} 

#img1 { 
height: 100px; 
width: 100px; 
margin: 0 auto; 
} 

#block2 { 
width:100%; 
background-color: orange; 
} 

.dummytext { 
font-family: 'Ralleway, sans-serif'; 
font-size: 20px; 
text-align: justify; 
margin:10px; 
} 

#block3 { 
width:100%; 
background-color: brown; 
} 

#img2 { 
width:100px; 
height:90px; 
margin 0 auto; 
} 

Dies ist die Standardlösung für das Erreichen des gewünschten Layouts.