Warum ist die zwei p-tags nicht neben einander, als der Bildschirm breit ist?

Wenn die browser-Breite von mehr als 1000px den div.flex-container ändert so dass die p-tags werden konnte, neben jeder anderen. Sie sind jedoch immer noch übereinander.

Was kann ich tun, um Sie neben einander auf großen Bildschirmen und über einander auf schmalen Bildschirmen?

(Sorry, ich habe die Frage hier. Aber ich kann wirklich nicht verstehen, was passiert ist. Mit "flex-direction: column" die p-tags sind immer übereinander. Ohne es sind Sie immer neben einander.)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css">
      .flex-container {
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          max-width: 800px;
          min-height: 180px;
          border: red 2px solid;
      }
      @media (max-width: 1000px) {
          .flex-container {
              max-width: 400px;
          }
      }
      .flex-container p {
          flex: 1;
          -webkit-box-flex: 1;
          display: block;
          width: 300px;
          margin: 0px;
          margin-right: 20px;
          margin-bottom: 10px;
          border: red 2px solid;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <p>
        This page is for setting up the W+ bookmarklet and adding it
        to your brower's bookmarks bar.
      </p>
      <p>
        The idea of this bookmark is to help searching when you find
        something on a web page.  Maybe you see a book
        title that looks interesting?  Then you can start the W+
        bookmarklet and click the first word and the last word in
        the title.  That will give you a number of alternative
        ways to search for it.
      </p>
    </div>
  </body>
</html>

Sie können nicht nur die beiden p-tags auf der gleichen Linie. Nach einem p-tag deklariert ist, bricht die Linie. ODER Sie können Sie in einer div und diese für die Anzeige auf der gleichen Linie..
stackoverflow.com/questions/10319483/... geben Ihnen einen besseren Blick auf Sie.
Nochmals vielen Dank. Ich spielte mehr mit dem Beispiel aus dem Almanach (unten) und es hat tatsächlich funktioniert es, wenn ich "Stil: inline-block" für die p-tags. Aber -- wenn ich von "Zeile" , "Spalte", die es nur stapeln Sie die orange Blöcke oben sind es andere, leider. Statt der Umhüllung zur nächsten Spalte.
Süß! Wenn alles geklappt hat, dann könnte man überprüfen, dass der Pfeil weiter nach unten meine Antwort, dass wäre toll!
Ja, das hat mir geholfen. Ich merke nach dieser suchte ich für die falsche Lösung. Was will ich eigentlich hier zu sein scheint, Zeitung Stil Spalten. Ich dachte, flex war der Weg zu gehen. (Es war einige Zeit, da ich diese überprüft... 😉 ) So, jetzt weiß ich die Grenzen hier. Ich werde einfach verwenden, column-width: 400px in das div-tag. (Und die, die nicht arbeiten genau wie ich es erwartet habe, aber... 😉 )

InformationsquelleAutor Leo | 2013-12-31

2

Flex ist so etwas wie eine neue Eigenschaft, wie Sie früher betont. Es ist ziemlich stark abhängig von Ihrem web-browser, so werde ich es brechen für jeden der gängigen Browser:

Internet Explorer:
Diese Funktion funktioniert nur mit dem IE 10+ und in der Tat, es hat nur eine Art von syntax, die unten:
```
display:flexbox;
```
Safari:
Diese Funktion funktioniert nur mit Safari 3.1+, und in der Tat.. die ältere Versionen:
```
display:box;
```
Chrome:
Diese Funktion arbeitet in zwei Möglichkeiten. Ersten, Versionen 21+ können Sie die moderne version, die ist:
```
display:flex;
```
Zweite, Versionen 20 - können nur die älteren Versionen (gerade wie Safari)

FireFox:
Dies ist auch auf zwei Arten funktioniert. Ersten, Versionen 2, die durch 21 die alte version verwenden (wieder, wie Safari und Chrome Versionen 20-). Zweite, Versionen 22+ verwenden werden, die moderne version(nur als Chrome-Versionen 21+).

Oper:
Dies funktioniert nur mit 12,1+ und unterstützt auch die moderne version (gleiche wie Firefox-Versionen 22+ und Chrome-Versionen 21+).

Mit, dass gesagt wird, Sie müssen sehr klar ist, welchen browser Sie verwenden. Um eine bessere umfassende Anleitung für die Verwendung von flex und flex-Boxen, ich würde sehr empfehlen die Almanach, die Seite, die ich verlinkt haben, wird Ihnen ein Spaziergang durch die mit den Grundlagen.

Danke @BuddhistBeast, ich habe gelesen, dass die Seite (aber vielleicht nicht verstanden). Im moment bin ich gerade versucht, diese zu arbeiten in Chrom und ich bin eigentlich nur daran interessiert in den neuesten Browsern. (Kann ich mir leisten, da es nicht für eine kommerzielle Website. 😉 ) Getestet habe ich das erste Beispiel aus Almanach, die Sie Bearbeiten können, auf CODEPEN. Was auch immer ich Tat, es funktionierte ---- bis ich verändert aus UL LI, DIV, P! Ich kann nicht sagen, ich bin weniger verwirrt, aber es ist wenigstens etwas. 😉
Ich habe gerade versucht es auf codepen und es funktionierte gut für mich. Haben Sie zu ersetzen das UL durch DIV und alle LI 's mit den P' s?

InformationsquelleAutor BuddhistBeast
9

Mithilfe der Spalte Richtung für die Flexbox-erfordert eine explizite Höhe, um für die Verpackung zu arbeiten (siehe: http://codepen.io/cimmanon/pen/oyilE).

Wenn Sie wollen, um Zeitung Stil Spalten ohne explizite Höhen, die multi-column-Modul ist, was du bist suchen für.

http://codepen.io/cimmanon/pen/CcGlE
```
.flex-container {
  -webkit-columns: 20em;
  -moz-columns: 20em;
  columns: 20em;
}
```
Problem ist, dass der Inhalt fließt pro Spalte. Es macht oft mehr Sinn haben, es fließen Zeile Stil, so dass die meisten neueren Sachen ist auf der Oberseite
Was hat das damit zu tun? Beide Spalte Orientierung für flexbox (das ist das, was der OP benutzt) und Spalten fließen durch die Spalte. Wenn das ist nicht, was Sie wollen, dann ist diese Frage nicht auf Sie zutreffen.

InformationsquelleAutor cimmanon

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.