Zwei Seiten gehen nicht nebeneinander, sondern übereinander

-1

So mache ich eine Website über Medienabfrage, aber ich habe ein Problem.Zwei Seiten gehen nicht nebeneinander, sondern übereinander

Es gibt zwei Seiten, die sich Seite an Seite bewegen sollen und 50% der Seite ausmachen. Das Problem ist, dass sie sich nicht von einer Seite zur anderen bewegen, sondern übereinander.

Sieht aus wie ein Problem, das nur durch Hinzufügen von Breite gelöst werden sollte: 50%; zu beiden ach, aber ich scheint nicht zu arbeiten. Ich habe auch versucht Float nach links und rechts und eine Menge Sache, aber nichts von dem, was ich versucht habe scheinen zu funktionieren.

Ich sollte auch beachten, dass die ganze Seite in einer Flexbox ist, die wahrscheinlich ein Teil des Problems ist. Hier

ist der Code für die Medienabfrage, wo das Problem liegt:

@media (min-width: 30em) and (max-width: 37.5em){ 

    body section, footer, header{ 
     display: flex; 
     flex-wrap: row wrap; 
    } 

    .aside1, .aside2{ 
     font-family: 'Damion', cursive; 
     width:50%; 
    } 

}

Hier ist auch das Markup des html. Nur die wichtigen Dinge (glaube ich):

<section> 
    <aside class="aside1"><h2>Aside 1</h2><p>Lorem ipsum.</p></aside> 
    <aside class="aside2"><h2>Aside 2</h2><p>Lorem ipsum.</p></aside> 
    <article> 
     <h1>Article</h1> 
     <p><b>Lorem ipsum.</b></p> 
     <p>Lorem ipsum.</p> 
    </article> 
</section>

Quelle

2017-02-23 Albert Elías Arason

Wir müssen Ihre Auszeichnung sehen. –

Und "Flex-wrap: Zeilenumbruch;" ist ungültig.Aber wahrscheinlich nicht im Zusammenhang mit Ihrem Problem. –

Ja, der Zeilenumbruch war nur ein Test. Sollte nur in der Reihe sein, denke ich. Oder nichts –

Lösung 1: Verwenden Sie schwimmen

@media (min-width: 30em) and (max-width: 37.5em){ 
 
    .aside1, .aside2{ 
 
    font-family: 'Damion', cursive; 
 
    width:50%; 
 
    float:left; 
 
    } 
 
    .clear { clear: both; } 
 
}

<section> 
 
<aside class="aside1"><h2>Aside 1</h2><p>Lorem ipsum.</p></aside> 
 
<aside class="aside2"><h2>Aside 2</h2><p>Lorem ipsum.</p></aside> 
 
<article class="clear"> 
 
    <h1>Article</h1> 
 
    <p><b>Lorem ipsum.</b></p> 
 
    <p>Lorem ipsum.</p> 
 
</article> 
 
</section>

Einmal auf die angegebene Größe der Größe verändert, wird die CSS richtig angezeigt

Sie könnenverwendenum die Container nebeneinander zu setzen. Wenn Sie dies tun, müssen Sie sicherstellen, dass Sie einen Container darunter mit clear: both haben, oder Sie werden Layoutprobleme haben.

Lösung 2: Verwenden Display

@media (min-width: 30em) and (max-width: 37.5em){ 
 
    .aside1, .aside2{ 
 
    font-family: 'Damion', cursive; 
 
    width:49%; 
 
    padding:0px; 
 
    margin:0px; 
 
    display:inline-block; 
 
    } 
 
}

<section> 
 
<aside class="aside1"><h2>Aside 1</h2><p>Lorem ipsum.</p></aside> 
 
<aside class="aside2"><h2>Aside 2</h2><p>Lorem ipsum.</p></aside> 
 
<article> 
 
    <h1>Article</h1> 
 
    <p><b>Lorem ipsum.</b></p> 
 
    <p>Lorem ipsum.</p> 
 
</article> 
 
</section>

Hinweis Der Standard display Option in den meisten Browsern ist display: block, was bedeutet, dass sie nicht nebeneinander, es sei denn, dass festgelegt werden kann Wert wird zu inline oder inline-block oder durch die Verwendung von float geändert. W3Schools Reference

Quelle

2017-02-23 23:55:29

habe mein Problem nicht behoben, denke ich. Ich bin mir nicht sicher, wo Sie möchten, dass ich die '

' in den HTML-Code lege. Ich lege es direkt unter die Seite2, wie du es oben im HTML demonstriert hast. Nicht sicher, ob das richtig ist, aber –

Ich sah den Schnitt. Das Hinzufügen der eindeutigen Klasse in den Artikel schien nicht zu funktionieren. –

Entschuldigung, ich habe 10 Änderungen an dieser Antwort vorgenommen. Ich fügte eine zweite Lösung hinzu. Beides funktioniert für mich, wenn ich den Browser auf die angegebene Größe skaliere. –

-1

Nun, ich fand die Antwort. Es gab eine kleine Codezeile, die nicht mit dem Code interagieren sollte, der das "Problem" hatte.

Das Problem war, dass es eine Linie war:

Körperabschnitt {flex-Richtung: column;}

Diese Linie war außerhalb des @media und ich habe es nicht mit, dass in Wechselwirkung treten würde Code. Also habe ich das einfach entfernt und es ist behoben.

Danke an alle, die versucht haben, zu helfen. Ich kann nicht glauben, wie nett zufällige Leute im Internet sind.

Quelle

2017-02-24 00:52:00

Zwei Seiten gehen nicht nebeneinander, sondern übereinander

Antwort

Verwandte Themen