CSS Grid-System nicht als Arbeits

dachte

/* Responsive Styling */ 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 
} 
 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 
[class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
} 
 
.col-1 {width: 8.33%;} 
 
.col-2 {width: 16.66%;} 
 
.col-3 {width: 25%;} 
 
.col-4 {width: 33.33%;} 
 
.col-5 {width: 41.66%;} 
 
.col-6 {width: 50%;} 
 
.col-7 {width: 58.33%;} 
 
.col-8 {width: 66.66%;} 
 
.col-9 {width: 75%;} 
 
.col-10 {width: 83.33%;} 
 
.col-11 {width: 91.66%;} 
 
.col-12 {width: 100%;} 
 

 
/* Body CSS */ 
 
/* Header */ 
 

 
#header { 
 
\t height: 70px; 
 
\t background-color:white; 
 
\t border-top: solid 5px #324f8e; 
 
\t border-bottom: solid 2px #d5dae7; 
 
\t } 
 
\t 
 
.logo { 
 
\t background-image: url('images/logo.png'); 
 
\t background-repeat: no-repeat; 
 
\t margin: 15px; 
 
\t float: left; 
 
\t width: 100%; 
 
\t height: auto; 
 
\t } 
 
\t 
 
.search { 
 
\t backr

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Project</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 

 
<body> 
 

 
<div id="header"> 
 
<div class="col-5 logo"></div> 
 
<input type="search" class="col-2 search" placeholder="Search..." /></div> 
 
<div class="ool-2 account"></div> 
 
<div class="ool-1 notification"></div> 
 
<div class="ool-2 logout"></div> 
 
</div> 
 

 

 

 
</body> 
 

 
</html>

ich nicht die Suche im Kopfbehälter nach dem Logo zu machen scheint. Ich möchte, dass alles für die Überschriftsleiste ansteht. Ich versuche das Grid-System zu verwenden, es ist etwas Kleines, nehme ich an, aber als Neuling klickt es nicht auf mich.

Auch Probleme mit dem Logo, scheint es auf der Unterseite leicht abgeschnitten, versucht, ein paar verschiedene Dinge mit der Höhe, kein Glück auf diese entweder.

Vielen Dank im Voraus.

Quelle

2017-09-27 OneUnited

Yeaaa, nur damit Sie wissen, ist dies nicht der CSS 'grid' System. Aber auch, bitte stelle deine Arbeit in eine Geige (oder etwas Ähnliches), damit andere leicht herumstochern können. – Pytth

Irgendwelche Empfehlungen für das richtige Rastersystem? Ich habe das von W3schools abgeholt. – OneUnited

diesen Code auf Ihre Header hinzufügen:

display: grid; 
grid-template-columns: repeat(x, 1fr);

Ändern der x durch die Anzahl der Elemente, die Sie in einer einzigen Zeile möchten.

Dieser Artikel kann hilfreich sein: CSS Grid Guide

Quelle

2017-09-27 22:01:08

CSS Grid-System nicht als Arbeits

Antwort

Verwandte Themen