Responsive Webseite mit absoluter/relativer Positionierung

Question

* { 
 
    box-sizing: border-box; 
 
} 
 
h1 { 
 
    text-align: center; 
 
    margin-bottom: 20px; 
 
} 
 
div { 
 
    width: 100%; 
 
} 
 
p { 
 
    width: 90%; 
 
    height: 200%; 
 
    margin: 20px; 
 
    color: black; 
 
    padding: 10px; 
 
} 
 
@media (min-width: 992px) { 
 
    .col-lg-1, 
 
    .col-lg-2, 
 
    .col-lg-3, 
 
    .col-lg-4, 
 
    .col-lg-5, 
 
    .col-lg-6, 
 
    .col-lg-7, 
 
    .col-lg-8, 
 
    .col-lg-9, 
 
    .col-lg-10, 
 
    .col-lg-11, 
 
    .col-lg-12 { 
 
    float: left; 
 
    position: relative; 
 
    border: 1px solid black; 
 
    margin: auto; 
 
    } 
 
    .col-lg-1 { 
 
    width: 8.33%; 
 
    } 
 
    .col-lg-2 { 
 
    width: 16.66%; 
 
    } 
 
    .col-lg-3 { 
 
    width: 25%; 
 
    } 
 
    .col-lg-4 { 
 
    width: 33.33%; 
 
    } 
 
    .col-lg-5 { 
 
    width: 41.66%; 
 
    } 
 
    .col-lg-6 { 
 
    width: 50%; 
 
    } 
 
    .col-lg-7 { 
 
    width: 58.33%; 
 
    } 
 
    .col-lg-8 { 
 
    width: 66.66%; 
 
    } 
 
    .col-lg-9 { 
 
    width: 74.99%; 
 
    } 
 
    .col-lg-10 { 
 
    width: 83.33%; 
 
    } 
 
    .col-lg-11 { 
 
    width: 91.66%; 
 
    } 
 
    .col-lg-12 { 
 
    width: 100%; 
 
    } 
 
} 
 
#heading { 
 
    position: absolute; 
 
    left: 358px; 
 
    top: 0; 
 
    background-color: #A52A2A; 
 
    width: 20.2%; 
 
    height: 12.2%; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
} 
 
</style>

<h1>Our Menu</h1> 
 

 
<div class="row"> 
 
    <div class="col-lg-4"> 
 
    <section id="heading">Heading</section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p> 
 
    </div> 
 

 
</div>

ich eine reaktions webpapge zu schaffen versuchen:

I 3 divs habe, ich brauche von ihnen jeweils eine Überschrift oben Recht zu haben, Ecke. Was ich tun möchte, ist, wenn ich die Breite des Browsers von 992px auf Vollbild vergrößern, sollten die div Größe und Position entsprechend mit seinen Überschriften entsprechend ändern.

Ich brauche auch Lücken zwischen den Divs, ich habe relative und absolute Positionierung verwendet, aber das scheint nicht zu funktionieren.

Mit meinem Code ändert sich die Überschrift nicht, wenn ich die Browserbreite ändere und es auch aus dem div herauskommt (siehe Bild). Bitte helfen!

Ps. Ich habe Überschrift nur auf die erste div für die Überprüfung hinzugefügt.

Answer 1

Sie haben die Eltern div Position relativ position:relative einzustellen, weil das Element mit der absoluten Position immer die erste Mutter Bricht, die die relative Position hat

see your example here

Answer 2

Ok, einige Punkte hier über Ihre Header:

• Es ist ein Header, verwenden so <h1, h2, h3...> Tags.
• Wenn es absolute Position hat, und Sie sagten, dass es 358px von links sein wird, wird es genau 358px von links positioniert, deshalb ist, warum aus dem div. Um die Überschrift auf der rechten Seite zu setzen, würde ich stattdessen float: right verwenden.
  Natürlich, Floating in den Header hinzufügen, müssen Sie Floating zum Text unten hinzufügen.
• Wenn Sie eine Breite von 20% zu verwenden, es wird nicht die gesamte occupé (wenn Sie die Header wollen die gesamt Eltern Breite passen, haben Sie 100% nutzen.
• Verwenden Medien-Anfragen mit @media (min-width: 992px) jene Änderungen zu machen Sie sagte, um größere Auflösungen.

Lösungsvorschlag Innerhalb Medienabfrage, Sie nur die Elemente außer Kraft setzen müssen, die Sie (in Ihrem Fall, nur die Breite). die Veränderung wollen wir ändern wollen, ist, dass Wenn der Bildschirm größer als 992px ist, ist die Kopfbreite 100% also: Hier ist die allgemeine CSS-Regel:

#heading { 
      background-color: #A52A2A; 
      border: 1px solid black; 
      float: right; 
      height: 12.2%; 
      position: relative; 
      text-align: center; 
      width: 20%; 
     } 

Und hier haben wir eine especific Regel haben ...

@media (min-width: 992px) { 
    #heading { 
    width: 100%; 
    } 
} 

Stellen Sie auch die background-color ändern wollen, alles, was Sie tun müssen, ist die Struktur, die in der Regel in der Medienabfrage hinzufügen ....

Answer 3

Sie müssen keine Position für die Überschrift verwenden. Sie können float verwenden. Und noch eine Sache, die Sie die ID in die Klasse bringen. Coz-ID wird nur für eindeutige ID verwendet. Also mach eine Klasse. Überprüfen Sie Ihren CSS-Abschnitt auf Medienabfrage, die ich für die Lücke verwende.col-lg-4 {Breite: 32,33%; Rand: 5px; } Nur eine sofortige Antwort für Ihre Frage. Danke, Jede Frage fragen Sie mich im Kommentar.

* { 
 
    box-sizing: border-box; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    margin-bottom: 20px; 
 
} 
 

 

 

 
p { 
 
    width: 90%; 
 

 
    margin: 20px; 
 
    color: black; 
 
    padding: 10px; 
 
} 
 

 
@media (min-width: 992px) { 
 
    .col-lg-1, 
 
    .col-lg-2, 
 
    .col-lg-3, 
 
    .col-lg-4, 
 
    .col-lg-5, 
 
    .col-lg-6, 
 
    .col-lg-7, 
 
    .col-lg-8, 
 
    .col-lg-9, 
 
    .col-lg-10, 
 
    .col-lg-11, 
 
    .col-lg-12 { 
 
    float: left; 
 
    
 
    border: 1px solid black; 
 
    
 
    } 
 
    .col-lg-1 { 
 
    width: 8.33%; 
 
    } 
 
    .col-lg-2 { 
 
    width: 16.66%; 
 
    } 
 
    .col-lg-3 { 
 
    width: 25%; 
 
    } 
 
    .col-lg-4 { 
 
    width: 32.33%; 
 
    margin:5px; 
 
    } 
 
    .col-lg-5 { 
 
    width: 41.66%; 
 
    } 
 
    .col-lg-6 { 
 
    width: 50%; 
 
    } 
 
    .col-lg-7 { 
 
    width: 58.33%; 
 
    } 
 
    .col-lg-8 { 
 
    width: 66.66%; 
 
    } 
 
    .col-lg-9 { 
 
    width: 74.99%; 
 
    } 
 
    .col-lg-10 { 
 
    width: 83.33%; 
 
    } 
 
    .col-lg-11 { 
 
    width: 91.66%; 
 
    } 
 
    .col-lg-12 { 
 
    width: 100%; 
 
    } 
 
} 
 

 
.heading { 
 
    float:right; 
 
    background-color: #A52A2A; 
 
    width: 20.2%; 
 
    height: 12.2%; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
} 
 

 

<h1>Our Menu</h1> 
 

 
<div class="row"> 
 
    <div class="col-lg-4"> 
 
    <section class="heading">Heading</section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
    <section class="heading">Heading</section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
    <section class="heading">Heading</section> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur 
 
     adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p> 
 
    </div> 
 

 
</div>