Wie kann ich drei divs zusammenbringen und eines davon verschwinden lassen, wenn die Seitengröße eine bestimmte Grenze hat?

Question

Also habe ich drei Div mit Klasse wie im Code-Snippet gezeigt.

/* CSS Question #4 */ 
 
     .box1 { 
 
      background-color: green; 
 
      width: 200px; 
 
     } 
 
     .box2 { 
 
      background-color: grey; 
 
      width: 200px; 
 
     } 
 
     .box3 { 
 
      background-color: aqua; 
 
      width: 200px; 
 
     }

<div> 
 
       <h1>Arrage the div:</h1> 
 
       <div> 
 
        <div class="box1">This one should be on the left side of the page</div> 
 
        <div class="box2">This one should be on the right side of the page</div> 
 
        <div class="box3">This one should be at the center of the page and it should disappear if the page become less than 800px.</div> 
 
       </div> 
 
      </div>

Im Versuch, die box1 auf der linken Seite zu machen, und die box2 auf der rechten Seite sein lassen, und für box3 braucht es in der Mitte zu sein und verschwinden, wenn die Seite werden weniger als 800px, wie in den divs selbst beschrieben.

Ich habe float zugewiesen: links zu box1 und float: rechts zu box2, um sie jeweils nach links und rechts auszurichten. Aber ich bin nicht sicher, wie ich die Box3 in die Mitte bekommen und verschwinden kann, wenn die Seite weniger als 800px ist.

Answer 1

Ich denke, Sie sollten Medienabfrage verwenden. Hier unten ist ein Referenzlink für die Medienabfrage.

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp 

http://learnlayout.com/media-queries.html 

Above Lösung,

.box1 { 
      background-color: green; 
      width: 50%; 
      float:left; 
      } 
    .box2 { 
      background-color: grey; 
      width: 50%; 
      float:right; 
      } 
    .box3 { 
      background-color: aqua; 
      width: 100%; 
      clear:both; 
      } 

Medienabfrage

@media screen and (max-width: 800px) { 
    .box3 { 
      display:none; 
    } 
} 

Answer 2

Css hängt davon ab, welche Größen Sie die verschiedenen Boxen sein wollen, ich persönlich würde Prozente auf alle drei divs gesetzt, Sagen Sie '33 .33333333% 'für die Breiten, schreiben Sie dann eine Medienabfrage, die @media anvisiert (max-width: 800px) und stellen Sie dann Ihr mittleres div so ein, dass es keine und links und rechts eine Breite von 50% anzeigt. Dies sollte Ihnen den gewünschten Effekt geben.

Sie sollten auch Ihre dritte div zu sein, in der zweiten Position bewegen oder flex nutzen sie anders zu bestellen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

  <div class="boxes"> 
       <div class="box1">This box should be on the left side of the page</div> 
       <div class="spacer"></div> 
       <div class="box3">This box should be at the center of the page and should disappear if the page is less than 800px.</div> 
       <div class="spacer"></div> 
       <div class="box2">This box should be on the right side of the page</div> 
       <br/> 
      </div> 


    .boxes {display: flex;} 

    .box1 { 
     background-color: green; 
     width: 200px; 
     float: left; 
    } 
    .box2 { 
     background-color: grey; 
     width: 200px; 
     float: right; 
    } 
    .box3 { 
     background-color: aqua; 
     width: 200px; 
     flex: auto; 
    } 

    .spacer {flex-grow: 1} 

    @media screen and (max-width: 800px) { 
     .box3 { 
       display:none; 
     } 
    } 

Das ist, wie ich es trotzdem tat ...