Wie kann ich Bilder in HTML bzw. CSS horizontal automatisch verteilen?

Ich möchte gern auf meiner Webseite (Schulaufgabe - die Lehrerin hat natürlich mal wieder alles genau erklärt) einige Bilder horizontal über die Breite des Feldes verteilen. Das aber nicht mit absoluten Werten sondern automatisch da wir auch responsive Design anwenden sollen - wenigstens ein klein wenig zumindest.

Nun schaffe ich es aber maximal die Abstände zwischen den Bildern mit margin einzustellen, dass diese sich automatisch verteilen funktioniert nicht wirklich, auch nicht mit auto.

Hier der Code der bisherigen Klasse für die Bilder:

.BildStartseite{
    width:150px;
    margin-left:2%;
    margin-right:2%;
}

vielleicht könnt ihr mir da ja helfen. Danke im voraus! :)

4 Antworten

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

23.03.2016, 17:53

Schau dir folgendes Video in Ruhe an und Übertrag die gezeigten Techniken auf deine gestellte Aufgabe. Vorausgesetzt es geht dir lediglich um die vertikale und/oder horizontale Zentrierung.

https://youtube.com/watch?v=hIG-fZ2042k

Wenn dem nicht so ist, solltest du dich mit CSS Box und Flex-Modell vertraut machen. Flex wäre der zeitgemäße Weg. Hat jedoch den Nachteil, das ältere Browsers dies gar nicht oder nur teilweise unterstützen. Die passenden Begriffe dir ja bereits genannt. Dir viel Erfolg bei der Umsetzung wünsche.

LG medmonk

Steffile

23.03.2016, 17:51

In diesem Fall wuerde ich mit multiple columns arbeiten. (Masonry benutzt auch dieses Prinzip):

HTML:

<div class="bilder-container"><img ...><img...><img...>...</div>

CSS:

.bilder-container {
    -webkit-column-count: 6; /* Chrome, Safari, Opera */
    -moz-column-count: 6; /* Firefox */
    column-count: 6;
}

Mit @media queries kannst du an bestimmten breakpoints den column count auf eine niedrigere Zahl runtersetzen.

AnonYmus19941

23.03.2016, 17:35

Vielleicht mit float (http://www.html-seminar.de/design_per_css_-_float.htm)...

mrhashpipeotto

23.03.2016, 17:47

/* Float sucks, Flexbox rules */
.images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

<div class"images">
<img src="foo.jpg">
<img src="bar.jpg">
...
</div>

Hallo,

ich bin dabei eine kleine Website zu erstellen. (Nicht online) Dabei habe ich mit dem Responsive Webdesign Probleme. Auf dem Smartphone, Tablet, Pc sieht die Seite gut aus. Jedoch, wenn ich das Browser-Fenster kleiner verschiebe, überlappen sich Bilder mit dem Text an einer Stelle. (Der Text ist speziell in Lists unterteilt.)

Hat mir jemand einen Rat? Die Bilder sind in Div-Boxen, der CSS Code dafür sieht ungefähr so aus:

    vertical-align: top;
    margin-right: xy
    margin-top: xy
    float: right;
    width: auto;

...zur Frage

Wie kann ich ein HTML Bild mittig ausrichten ohne Größenänderung?

ich habe es folgendermaßen probiert:

<style type="text/css">
<!--
img.center {
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px; /* negative Hälfte von width:400px */
top: 50%;
height: 150px;
margin-top: -75px; /* negative Hälfte von height:150px */
}
-->
</style>
 
</head>
<body>
 
     <img class="img.center" src="/img/meinbild.jpg">
 
</body>
</html>

jedoch wird das bild damit leider gestaucht. das bild soll aber immer im mittelpunkt des bildes zentriert werden und seine länge-breite-proportion behalten - also keine eierköpfe bekommen. die größe des bildes soll mit der größe des fensters mitwachsen...

...zur Frage

HTML Quill WYSIWYG, wie Designe ich es richtig?

Der Bereich zum editieren springt immer nach unten, schuld daran ist ein Skript teil, nämich

<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>

-----------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
   <style>
    body{
      margin: 0cm;
      padding: 0cm;
      font-size: 16px;
    }
    p {
      font-size: 16px;
    }
    header{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      position: relative;
      background-color: palevioletred;
    }
    footer{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      background-color: palevioletred;
    }
    #sidebar{
      margin: 0cm;
      padding: 0cm;
      float: left;
      min-height:100vh ;
      overflow-x: hidden;
      width: 150px;
      background-color: aliceblue;
      overflow-y: scroll;
      -ms-overflow-style: none; 
      scrollbar-width: none; /* Firefox */
    }
    #sidebar::-webkit-scrollbar {
      display: none;
    }
    #rechts{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
       
      min-height: 100vh;
      background-color: azure;
    }
  </style>
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
  <header>a</header>
  <div id="sidebar">
    <p>Bereich1</p>
    <p>Bereich2</p>
    <p>Bereich3</p>
    <p>Bereich4</p>
    <p>Bereich5</p>
    <p>Bereich6</p>
    <p>Bereich7</p>
    <p>Bereich8</p>
    <p>Bereich9</p>
  </div>
   
<div id="rechts">
  <div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
    </div>
   <div id="editor">
    <p>Hello World!</p>
  </div>
</div>
   
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
  <script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>
  <footer>a</footer>
</body>
</html>

...zur Frage

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

...zur Frage

CSS Bildgröße automatisch an div-Box anpassen

Ich bin grad bei dem Layout für meinen Onlineshop (Info-Projekt also kein echter Shop^^). Das Layout sieht bisher so aus, dass ich 2 Div-Boxen zentriert habe mittels Margin-left/right="auto". Die obere Spalte ist box ist der Header, die untere für den Inhalt. In die obere Box soll jetzt ein Schriftzug als Logo rein. Gibt es irgendeine Möglichkeit, dass das Bild automatisch an die Größe der div-Box angepasst wird? Als Größenangabe habe ich beim Header nur "width:850px" und "height: 20%". Wenn ich diese Angaben dann aber an das Bild schreibe (also dass ich in der CSS-Datei für das Bild "width="850px" etc. schreibe), funktioniert es nicht. Gibt es irgendeinen automatischen Befehl oder kann man das irgendwie ausrechnen? Danke ;)

PS: Die Auflösung des Bild ist 1500x909, falls das irgendetwas ändern würde ;)

...zur Frage

Hilfe für c# code mit HTML &CSS in Blazor?

Hallo, ich möchte eine WetterApp programmieren mit Blazor und sitze jetzt schon 4 Tage an dem Problem mit C#, da ich keine Ahnung habe wo ich anfangen soll und generell neu bin und nicht ganz vertraut bin. Ich habe die WetterApp mit JavaScript programmiert, allerdings soll ich C# verwenden und nicht JavaScript deshalb brauch ich eure Hilfe! Kann mir wer dabei helfen einen C# Code zu schreiben, welcher dasselbe macht wie mein javaScript-Code:

1. Ich möchte das mein "SeachrIcon-Button" aus einem HTML-Code als Suchbutton fungieren kann, womit ich die einzelnen Städte suchen kann, damit mir dabei dann die Wetterdaten angezeigt werden.

Ich möchte, dass dann die Bilder der zu den jeweiligen Wetter vorkommnissen angepasst werden, also die Wetter Daten sollen in der Console angezeigt werden aber nicht auf dem Display

Hier mein Html Code:

<body class="backgroundimage">


  <div class="card">
      <div class="search">
          <button><img src="/images/SuchIcon.png"></button>


              <input type="text" placeholder="Search" spellcheck="false" />
        
      
      </div>
  </div>
    
     
  <div class="weather"> 
      <div class="center margin-top">
      <img src="images/image1.png" width="200" height="200" style="opacity: 1" class="weather-icon" />
      </div>


     <div>
          <h1 class="temp">22°c</h1>
     </div>
      
      
      <div class="center">
          <h2 class="city center margin-top">New York</h2>
      </div>


          <hr class="hr1 line1" />

          <div id="imagesMain">
              <img src="/images/image1.png" width="75" height="75" class="imageline " />
              <img src="/images/image1.png" width="75" height="75" class="imageline " />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;" />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 12px; margin-right: -10px;" />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 2px; margin-right: -14px;"/>


          </div>

          <div>
           
              <p style="color:black;" class="line0 title margin-left ">Monday</p>
              <p style="color:black;" class="line0 title margin-left ">Tuesday</p>
              <p style="color:black;" class="line0 title margin-left ">Wednesday</p>
              <p style="color:black;" class="line0 title margin-left ">Thursday</p>
              <p style="color: black;" class="line0 title margin-left ">Friday</p>
             
           
          </div>

          <hr class="hr1 line" />

      <div class ="details">
          <div class="col">
              <img src="images/humidity.png"/>
              <div>
                  <p class="speed">Humidity</p>
                  <p class="humidity">50%</p>
                  
              </div>
          </div>
          <div class="col">
              <img src="images/wind.png" />
              <div>
                  <p class="speed">Wind Speed</p>
                  <p class="wind">15 km/h </p>
                 
              </div>

          </div>

      </div>
  </div>
  
   </body>

Im unteren Kommentar werd ich die restlichen Codes posten

...zur Frage

CSS margin verschiebt falsches element?

Hallo!

Obwohl ich schon seit einigen Jahren recht sicher in Programmiersprachen wie Java und C# bin, hab ich mich jetzt an ein Webprojekt gewagt. Ich benutze React, doch brauche natürlich auch CSS.

Jetzt habe ich folgendes Problem. Ich will hier den Titel einfach um 1em nach unten verschieben. Wie schaffe ich das? Ich habe es einfach mit

margin-top: 1em;

versucht, aber dadurch wird aus irgendeinem Grund das ganze

<div className='home'>

nach unten verschoben. Wieso?

Unten findet ihr Bilder, zum einen wie es ohne margin aussieht, dann wie es mit margin aussieht. Hier findet ihr den Code:

HTML:

<div className='home'>
    <h1>Willkommen!</h1>

</div>

CSS:

.home{
    background: #375398;
    height: 100vh;
    width: auto;
    margin-left: 250px;
}

h1{
    font-size: 3rem;
    color: white;
    margin-left: 1em;
    /*margin-top: 1em*/
    }

...zur Frage

Html/CSS/Javascript Website Bild wird nicht angezeigt?

Hi, will dass das erste Bild direkt angezeigt wird und das der Beispieltext rechts steht. Wegen Zeichen kurz gehalten. Danke!

<div class="mySlides" id="expandedImg">
<img src="bilder/schuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/schönschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/mann.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/lederschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/basketball.jpg" style="width:35%">
</div>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="bilder/schuh.jpg" style="width:90%" onclick="currentSlide(1)" alt=""></div>
<div class="column">
<img class="demo cursor" src="bilder/schönschuh.jpg" style="width:90%" onclick="currentSlide(2)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/mann.jpg" style="width:90%" onclick="currentSlide(3)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/lederschuh.jpg" style="width:90%" onclick="currentSlide(4)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/basketball.jpg" style="width:90%" onclick="currentSlide(5)" alt="">
</div>
</div>
</div> 
<div class="text">
<a>Beispieltext</a>
<p>Beispieltext...</p>
</div>
* {box-sizing: border-box;}
.container {
position: relative;
margin-top: 80px;
}
.mySlides {
display: none;
margin-bottom: -45px;
margin-top: 65px;
margin-left: 10px;}
.cursor {cursor: pointer;}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 300px;
width: auto;
padding: 16px;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;}
.next {
right: 0;border-radius: 3px 0 0 3px;} 
.prev:hover,
.next:hover {background-color: rgba(211, 211, 211, 0.8);}
.caption-container {text-align: center; background-color: rgb(255, 255, 255);color: white;}
.row:after {content: ""; display: table; clear: both;}
.column {float: left; width: 7%;}    
.demo {opacity: 0.6;}
.active,
.demo:hover {opacity: 1;}
.row {margin-top: 65px; margin-left: 10px;}
.text {display: flex; justify-content: flex-end; width: 40%;}
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;}

...zur Frage

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

...zur Frage

Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde.

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>

...zur Frage

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zur Frage

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

...zur Frage

WetterApp mit HTML, Css und C# über Blazor Server App?

Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.

Hier mein HTML code:

</div>

</div>

<div>

</div>

</div>

<img src="/images/image1.png" width="75" height="75" class="imageline "

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 22px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -14px;"

</div>

<div>

<p style="color:black;"class="line0 title margin-left ">Monday</p>

<p style="color:black;"class="line0 title margin-left ">Tuesday</p>

<p style="color:black;"class="line0 title margin-left ">Wednesday</p>

<p style="color:black;"class="line0 title margin-left ">Thursday</p>

<p style="color: black;"class="line0 title margin-left ">Friday</p>

</div>

<div>

<p class="speed">Humidity</p>

</div>

<div>

<p class="speed">Wind Speed</p>

</div>

</body>

hier mein Css code:

.backgroundimage {

background-image: url('../images/sun_background.png');

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

}

.cloud-background {

background-image: url('../images/cloud.png');

/* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */

}

.card {

width: 90%;

max-width: 470px;

color: #fff;

margin: 10px auto 0;

border-radius: 20px;

}

.search{

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

}

.search input{

border: 0;

outline: 0;

background: #ebfffc;

color: #555;

padding: 10px 25px;

height: 60px;

border-radius: 30px;

flex: 1;

margin-right: 16px;

font-size: 18px;

}

.search button{

border: 0;

outline: 0;

background: #ebfffc;

border-radius: 60%;

width: 60px;

height: 60px;

cursor: pointer;

}

.weather-icon{

margin-bottom: -30px;

}

.weather h1 {

font-size: 80px;

font-weight: 500;

color: floralwhite;

}

.weather h2 {

font-size: 40px;

font-weight: 400;

margin-top: -10px;

color: floralwhite;

}

.details {

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 20px;

margin-top: 50px;

}

.col {

display: flex;

align-items: center;

text-align: left;

margin-top: 150px;

}

.col img {

width: 20px;

margin-right: 20px;

margin-bottom: 70px

}

.humidity, .wind{

font-size: 28px;

margin-top: -6px;

color: floralwhite;

}

.speed{

font-weight: bold;

}

.temp {

margin-bottom: 20px;

display: flex;

justify-content: center;

}

.search button img{

width: 55%;

}

.center {

display: flex;

justify-content: center;

}

.top-left{

display: flex;

justify-content:left

}

.top-left

{

margin-left: 10px;

}

.margin-top{

margin-top: 20px;

}

.hr1 {

width: 390px;

height: 2px;

color: black;

}

.line{

margin-bottom: -100px;

margin-top: 10px;

}

.line1{

margin-top: 30px;

margin-bottom: -20px;

}

.line0{

margin-top: 70px;

margin-bottom: -90px;

font-size: 14px;

font-weight: bold;

color: black;

}

.imageline {

margin-top: 5px;

margin-bottom: -90px;

}

.imagesMain {

padding: 0;

margin-left: auto;

margin-right: auto;

margin-top: 20px;

text-align: center;

}

.imagesMain img {

height: 400px;

width: 300px;

vertical-align: middle;

}

.title {

display: inline-block;

color: lightgray;

}

.margin-left{

margin-left: 14px;

}

...zur Frage

Wie bekomme ich es hin, das die Kästen beim verkleinern des Fensters über die gesamte Länge geht?

Ich habe bisher das:

und verkleinert sieht es so aus:

Aussehen soll es aber so:

Hier mein Code:

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
      <style>
         header {
         text-align: center;
         font-size: 3em;
         padding: 5px;
         color: #fff;
         background-color: #FFBF00;
         }
         .wrapper { display:flex }
         @media screen and (max-width:620px) {
         .wrapper {display:block }
         }
         nav {
         width:15%;
         text-align: center;
         font-size: 2em;
         padding-right: 60px;
         color: #fff;
         background-color: #819FF7;
         margin-right: 10px;
         margin-bottom: 150px;
         }
         a {color: #fff }
         li {list-style: none }
         article {
         width:70%;
         color: #BDBDBD;
         }
         aside {
         color: #fff;
         width: 15%
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #01DFD7;
         margin-bottom: 150px;
         }
         footer {
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #D8D8D8;
         color: #A4A4A4;
         }
      </style>
   </head>
   <body>
      <header><h2>Header</h2></header>
      <div class="wrapper">
           <nav>
            <ul>
               <li><a href="" target="_blank">Link 1</a></li>
               <li><a href="" target="_blank">Link 2</a></li>
               <li><a href="" target="_blank">Link 3</a></li>
               <li><a href="" target="_blank">Link 4</a></li>
            </ul>
         </nav>
         <article>
            <h3>Lorem Ipsum</h3>
               <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
               sed diam nonumy eirmod tempor invidunt ut labore et dolore
               magna aliquyam erat, sed diam voluptua. At vero eos et
               accusam et justo duo dolores et ea rebum. Stet clita kasd
               gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
               amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
               sed diam nonumy eirmod tempor invidunt ut labore et dolore
            magna aliquyam.</p>
         </article>
         <aside>
            <h2>About</h2>
            <p>Lorem ipsum dolor<br>
               sit ametr,<br>
               consecteteuer<br>
               adipiscing elit.
            </p>
         </aside>
      </div>
      <footer>
         <p>&copy; </p>
      </footer>
   </body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen