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

abbrechen

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

lordy20

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.

IIlIlIlllIIlII

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.

tDoni

16.01.2017, 17:34

Z.B. mit Float.

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

Ähnliche Beiträge

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

...zum Beitrag

2 Tabellen untereinander anordnen HTML CSS?

Ich würde gerne 2 Tabellen untereinander anlegen.Ich habe dies schon mit divs probiert jedoch hat dies nicht so ganz geklappt.Kann mir wer erklären wie ich das machen kann?Danke

...zum Beitrag

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%;
}

...zum Beitrag

Hilfe in Mathe?

Hi. könnt ihr mit bitte weiterhelfen?

Von einem Würfel mit der Seitenlänge von 4m wurde eine Ecke wie dargestellt abgeschnitten.

a) Welche Höhe hat die Pyramide über der Schnittfläche?

b) Wie groß ist das Restvolumen des Würfels?

c) In welchem Punkt schneidet die Würfeldiagonale das blaue Dreieck?

...zum Beitrag

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?

...zum Beitrag

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
  }
?>

...zum Beitrag

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?

...zum Beitrag

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

...zum Beitrag

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?

...zum Beitrag

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

...zum Beitrag

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

...zum Beitrag

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

...zum Beitrag

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;
}

...zum Beitrag

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!

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen