Wie kann ich in CSS mehrere div's untereinander und nebeneinander anordnen?

Bei einem Taschenrechner dann ungefähr dann so:

[basics] [würfel] [kreis] [kugel] [zylinder] [Dreieck] [Pyramide]

usw...

Google hilft mir nicht weiter

4 Antworten

16.01.2017, 17:34

z.B. mit "float: left;" oder "float: right;"
Dann sind die Divs nebeneinander - solange Platz vorhanden ist.

Untereinander sind die Divs sowieso, bei "float" rutschen die Divs, die kein Platz mehr in der ersten Reihe finden, in die nächste.

Wenn du ein festes Layout mit einer bestimmten Anzahl von Divs pro Reihe haben möchtest, dann solltest du dir ein Gerüst dafür schreiben.

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

16.01.2017, 20:57

Du solltest nicht float nehmen, da das nicht direkt das ist, was du möchtest. Zumindest hört es sich so an. Du möchtest deine Elemente immer untereinander oder nebeneinander haben, oder?

Dann solltest du flex nehmen. Mit flex reihst du alle Elemente in eine Reihe bzw. untereinander an. Du kannst auch einstellen, ob es immer so sein soll, selbst wenn der Platz mal wegen ein paar wenigen Pixeln Fehlberechnung nicht passt oder halt ob eine nächste Reihe angefangen soll, falls der Platz nicht reicht.

Hier mal mein pen dazu: http://codepen.io/phng/pen/vgNbev , um das Ganze zu visualisieren.

Über die Eigenschaften findest du bei w3schools recht gute Artikel (die ersten vier Google-Treffer): https://www.google.de/search?q=css+w3+flex&ie=utf-8&oe=utf-8&client=firefox-b-ab&gfe_rd=cr&ei=6SR9WO2qI86P8Qf-laG4Dw

16.01.2017, 17:30

Also ich seh grade die Absätze werden nicht angenommen... die wären dann jeweils zu zweit nebeneinander

lordy20

16.01.2017, 17:35

Abstände kannst du mit "padding" und "margin" regulieren.

0

16.01.2017, 17:34

Z.B. mit Float.

Schau dir doch einmal das Framework http://getbootstrap.com/ an.

Ähnliche Fragen

Was für Gegenstände sind Beispiele für die geometrischen Körper Würfel, Pyramide, Zylinder, Kegel, Kugel und Quader?

3 bilder mit text nebeneinander sotieren html und css?

hi Leute wie kann ich 3 Bilder mit Text dazu nebeneinander sortiert weil bei mir ist alles untereinander sortiert ihr ein Beispiel Bild und ihr auch ein beispiel was ich bisher programmiert habe

HTML Dinge nebeneinander anordnen?

Hi, ich habe etwas HTML und CSS geschrieben und das Ergebnis ist nicht wie ich es mir gewünscht habe. Ich will versuchen, dass das Bild ganz links auf der Website ist, in der Mitte das Willkommen und ganz rechts der link zu einer anderen Page. Ich habe versucht, die Elemente zu positionieren, aber irgendwie verändert sich die Position nicht. Kann jemand den Fehler hier vielleicht schnell finden? Danke schonmal!

HTML/CSS, Footer, Divs werden untereinander und nicht nebeneinander platziert?

Guten Abend. :)

Ich beschäftige mich momentan viel mit HTML und CSS und habe eine eigene kleine Website zum Spaß gemacht.

Aus Jux und Tollerei wollte ich jetzt einen Facebook-Like und einen -Teilen-Button mit einbauen, und das in einem Footer. Die Buttons habe ich beide jeweils in ein Div gepackt und diesen per "float: left;" gesagt, das sie sich nebeneinander von links anordnen sollen. Zumindest stand in sehr vielen anderen Foren in denen ich mich umgesehen habe so ziemlich überall genau das.

Bei mir funktioniert das aus unerfindlichen Gründen leider nicht, die Buttons werden untereinander angeordnet.

Zur Seite kommt ihr hier: http://nyancatmarathon.tk/

(Am Besten auf Lautlos stellen, nervige Musik im Hintergrund, außerdem hat sich der Footer von ganz unten in die Mitte der Seite verschoben, als ich die Seite am Localhost bearbeitet habe war das noch nicht so, komisch...)

Ich hoffe jemand von euch weiß woran es liegt und kann mir helfen. :)

Vielen Dank und LG, Bluedragon1

Html div anordnen?

Hallo, ich habe mehrere Container, welche nebeneinander, bzw. untereinander platziert

werden sollten. Das problem liegt darin, dass wenn ein Container zu groß ist werden bei den kleineren Container platz gelassen. Wie kann man das vermeiden?

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

Auf tumblr die Bilder nebeneinander anordnen

wie kann ich die Bilder nebeneinander anordnen? Ich habe es schon bei den Templates versucht. Da habe ich dreispaltig genommen, aber sie sind trotzdem noch untereinander. Ich habe bis jetzt auch nur zwei Bilder und ein Text. Ist das vielleicht zu wenig? Wie kriege ich die Bilder nebeneinander?

Mathe Geometrie Körper?

Bevor ich hier jemandem was vormache. Ja.

Ich nutze diese Plattform einfach mal als eine Möglichkeit mich vor der Arbeit zu drücken,da ich schon ohnehin lange mit anderen Dingen verbracht habe.Und...ich habe kein gutes System für mein Zeitmanagement.Also wäre es nett wenn ihr mal folgendes beantworten könntet.

Wie viele Ecken,Kanten und Flächen (Auch Art von Fläche)

Haben folgende Körper

Würfel Quader Zylinder Kegel Kugel dreiseitiges Prisma fünfseitiges Prisma sechsseitiges Prisma quadratische Pyramide dreiseitige Pyramide

Kennt jemand die einzelnen Sachen?

Frage zur Formatierung in HTML (Bild, h1, h2) nebeneinander?

Hallo Liebe Community, ich habe ein Problem mit HTML... Könnte mir bitte jemand helfen.

Und zwar übe ich gerade ein bisschen mit HTML, und mir ist gerade aufgefallen, dass wenn in im Header ein Bild, eine Überschrift

und eine Zweite Überschrift habe, diese untereinander stehen, ich meine... Das wusste ich ja... Aber nun möchte ich wissen, wie ich diese drei nebeneinander darstellen kann... Ich habe leider auch nichts im Internet gefunden...
Skript:

...
xxx yyy

...

Ich habe auch schon alles in CSS versucht, aber habe es nicht hinbekommen...

mfg Alexander

Wie kann ich die HTML-Buttons untereinander anordnen?

Hey,

in einer while-Schleife habe ich einen Button erstellt. Doch sie werden nebeneinander angeordnet und nicht untereinander. Doch wie positioniere ich sie untereinander (Nein, <br> funktioniert nicht)?

  while ($row = mysqli_fetch_assoc($data)) {
?>
<p class="select_btn">
  <button class="lebensmittel-eintrag" data-value="<?php echo $row['lebensmittel']?>">
    <?php echo ($number).". ".$row['lebensmittel']."<br>"; ?>
  </button>
  <br>
</p>
<?php $number++; ?>
<?php
  }
?>

CSS: Zwei Bilder nebeneinander zentrieren?

Hallo ich habe eine Seite gebastelt möchte zwei Bilder nebeneinder zentriert anordnen. Wie mache ich das?

Code html

<footer>
<img class = "social" src="facebook.png">
<img class = "social" src="twitter.png">
</footer>

Css

img.social {
float: middle;
display: block;
margin: auto;
width: 5%;
height: 5%;
}

Ist die Oberfläche und der Flächeninhalt bei einer Pyramide das gleiche?

Also wenn ich eine pyramide habe und ich die Oberfläche ausrechnen will ist es O=G+M

Und ist es bei dem flächeninhalt gleich?

Ist es dann auch bei den anderen Körpern also z.B Trapez, Zylinder, Dreieck und Rechteck?

4 divs nebeneinander anordnen

Hallo, ich habe 4 divs, die in einem großen div direkt nebeneinander liegen sollen.

ich hab erstmal ohne stylesheet angefangen:D

http://finnzentgraf.fi.funpic.de/Untitled-1.html

warum leigen die alle untereinander, und sogar außerhalb des großen divs?

Was hat ein Prisma mit einer Pyramide zu tun?

Hallo,

meine Frage lautet, was Prismen mit Pyramiden zu tun haben ? Im Matheunterricht haben wir besprochen, dass wir eine Pyramide, egal welche Grundfläche, zu einem Prisma ergänzen können. Aber was genau bringt es uns? Können wir mit diesem Verfahren das Volumina berechnen ? Und kann man mit jeder Form von Körper z.B. Zylinder, Quader, Würfel, Kegel und Kugel einem Prisma hinzufügen. Unser Mathelehrer meint, dass wir diesem Grund in der nächsten Stunde hintergehen. Wäre nennt, wenn jemand sich bereit erklärt mir es zu erklären. Und es ist keine Hausaufgabe oder kein Referat/ Vortrag, was man auch von der Aufgabenstelle auch herausnehmen kann.

Ich bedanke mich schon in Voraus.

Was möchtest Du wissen?

Deine Frage stellen

gf-shortened-block.is-short { max-height: none !important; } gf-shortened-block.is-short::after { display: none !important; } body { font-family: 'Roboto',sans-serif !important; } h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Slab',serif !important; }