Wie positioniere ich ein div auf der rechten Seite der Überschrift

Question

Ich möchte eine (ein orangefarbener Kreis) rechts von meiner Überschrift hinzufügen <h2>. Das Problem ist, dass, wenn ich den Bildschirm verkleinere der Kreis über die Überschrift springt. Wie kann ich es auf der richtigen Seite bleiben, egal wie groß der Bildschirm ist?

.head-text { 
 
    position: relative; 
 
    margin-top: 12%; 
 
    text-align: center; 
 
    width: 100%; 
 
    height: auto; 
 
    background-size: auto; 
 
} 
 
img { 
 
    margin: 10 0 0px 0px; 
 
    float: right; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 150px; 
 
    border: 2px solid #000000; 
 
} 
 
h2 { 
 
    font-weight: bold; 
 
    font-family: Calibri; 
 
    color: black; 
 
    font-size: 4em; 
 
    margin: auto; 
 
}

<div class="section" data-menuanchor="thirdPage"> 
 
    <div class="slide"> 
 
    <div class="main mainupp"> 
 
     <div class="myheader border"></div> 
 
     <div class="head-text"> 
 
     <div class="row"> 
 
      <div class="col-sm-5 col-xs-2"> 
 
      <div class="post-thumb orange"></div> 
 
      </div> 
 
      <div class="col-sm-2 col-xs-8"> 
 
      <h2><img>ASDASD</h2> 
 
      </div> 
 
      <div class="col-sm-5 col-xs-2"></div> 
 
     </div> 
 
     </div>

Answer 1

Verwenden position in diesem Fall ing:

img { 
    margin: 10 0 0px 0px; 
    /* float: right; Remove this */ 
    width: 40px; 
    height: 40px; 
    border-radius: 150px; 
    border: 2px solid #000000; 
    /* Add these */ 
    position: absolute; 
    right: 0; 
} 

das in Ordnung bringen sollte. Entfernen Sie nicht die position: relative auf der .head-text.

Aktualisiert Snippet

.head-text { 
 
    position: relative; 
 
    margin-top: 12%; 
 
    text-align: center; 
 
    width: 100%; 
 
    height: auto; 
 
    background-size: auto; 
 
} 
 
img { 
 
    margin: 10 0 0px 0px; 
 
    /* float: right; Remove this */ 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 150px; 
 
    border: 2px solid #000000; 
 
    /* Add these */ 
 
    position: absolute; 
 
    right: 0; 
 
} 
 
h2 { 
 
    font-weight: bold; 
 
    font-family: Calibri; 
 
    color: black; 
 
    font-size: 4em; 
 
    margin: auto; 
 
}

<div class="section" data-menuanchor="thirdPage"> 
 
    <div class="slide"> 
 
    <div class="main mainupp"> 
 
     <div class="myheader border"></div> 
 
     <div class="head-text"> 
 
     <div class="row"> 
 
      <div class="col-sm-5 col-xs-2"> 
 
      <div class="post-thumb orange"></div> 
 
      </div> 
 
      <div class="col-sm-2 col-xs-8"> 
 
      <h2><img>ASDASD</h2> 
 
      </div> 
 
      <div class="col-sm-5 col-xs-2"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Und bitte, nisten die Tags richtig.

Answer 2

white-space: nowrap verhindert, dass es in zwei Linien zu brechen und wenn man es recht behalten will (statt den Text überlappend), können Sie auch overflow: hidden und text-overflow: ellipsis zum h2 hinzufügen:

.head-text { 
 
    position: relative; 
 
    margin-top: 12%; 
 
    text-align: center; 
 
    width: 100%; 
 
    height: auto; 
 
    background-size: auto; 
 
} 
 
img { 
 
    margin: 10 0 0px 0px; 
 
    float: right; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 150px; 
 
    border: 2px solid #000000; 
 
} 
 
h2 { 
 
    font-weight: bold; 
 
    font-family: Calibri; 
 
    color: black; 
 
    font-size: 4em; 
 
    margin: auto; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="section" data-menuanchor="thirdPage"> 
 
    <div class="slide"> 
 
    <div class="main mainupp"> 
 
     <div class="myheader border"></div> 
 
     <div class="head-text"> 
 
     <div class="row"> 
 
      <div class="col-sm-5 col-xs-2"> 
 
      <div class="post-thumb orange"></div> 
 
      </div> 
 
      <div class="col-sm-2 col-xs-8"> 
 
      <h2><img>ASDASDASDASDASDASDASDASD</h2> 
 
      </div> 
 
      <div class="col-sm-5 col-xs-2"></div> 
 
     </div> 
 
     </div>