Ok der Titel könnte ein wenig verwirrend sein. Ich habe einige ähnliche Fragen gesehen, aber viele der Antworten scheinen veraltete Lösungen mit Schwimmern Punkt usw.Flexbox: div bewegt sich?
Ich habe folgende HTML & CSS:
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.page {
height: 100%;
}
.main-content {
height: 90%;
max-width: 70%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.main-left {
text-align: center;
padding: 20px;
}
.nav {
border: 1px solid blue;
height: 5%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.nav-left {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 10vh;
}
.nav-right {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 10vh;
}
.nav ul {
padding: 0;
margin: 0;
display: inline-block;
}
.nav li {
display: inline-block;
text-align: center;
}
.nav a {
color: black;
}
.nav a:link {
text-decoration: none;
}
.nav a:visited {
text-decoration: none;
}
.nav a:hover {
text-decoration: none;
color: gray;
}
.nav a:active {
text-decoration: none;
}
img {
border-radius: 50%;
}<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://use.fontawesome.com/383177a704.js"></script>
<title>Alex Wilson - Man, Web Designer, Legend</title>
</head>
<body>
<div class="page">
<div class="main-content">
<div class="main-left">
<img src="http://i.imgur.com/IMIKhWA.jpg"></img>
</div>
<div class="main-right">
<h1>About me</h1>
<p>These are words about how awesome I am. I'm pretty much the best. Scratch that, I am the best. Everything I say is right and everything I do is great. My friends love me and my enemies want to be me. People can't imagine any way I could possibly
be improved. I'm a shining example of humanity and more specifically, manhood. I'm the pinnacle of excellence. I piss glory and shit greatness. You mad? Get at me. Get rekt.</p>
</div>
</div>
<div class="nav">
<div class="nav-left">
<ul>
<li><a href="Home.html">Home</a>
</li>
<li><a href="About.html">About</a>
</li>
<li><a href="work.html">Work</a>
</li>
</ul>
</div>
<div class="nav-right">
<ul class="list-right">
<li><a href="https://www.linkedin.com/in/alexwilson33"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
<li><a href="https://github.com/AWilso30"><i class="fa fa-github" aria-hidden="true"></i></a>
</li>
<li><a href="https://twitter.com/XZISTTT"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li><a href="https://www.facebook.com/djcastaway"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li><a href="email.com"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</div>
</body>Hier ist die codepen.
Ich möchte nur eine feste Navigationsleiste am unteren Rand des Ansichtsfensters mit zwei Abschnitten machen. Links Links für den Rest der Seite und rechts Links zu externen Quellen. Ich möchte alles sowohl horizontal als auch vertikal zentriert und reaktionsfähig sein.
Ich habe Probleme beim Versuch, mehrere Lösungen für dieses Problem. Jedes Mal, wenn die Höhe, Ausrichtung oder Größe der Navigationsleiste geringfügig abweicht.
Wenn ich den Inhalt div auf 90% und die Navbar div auf 10%, dann "funktioniert" und die Dinge richtig ausgerichtet sind, aber ich möchte die Navbar etwas dünner sein.
Wie Sie mit der Grenze sehen können, habe ich das nav div mit - im Grunde schwebend gestylt und ich habe keine Ahnung warum.
Wenn mir jemand helfen kann, warum das passiert und wie es zu beheben, das wäre toll.
möglich Anleitung: http://stackoverflow.com/a/33856609/3597276 –
Dank Michael. Ich habe kürzlich auch die Fragen zu Flexbox Froggy durchgelesen. Wirklich großartige Ressource, wenn jemand das in Zukunft liest. http://flexboxfroggy.com/ –