Почему моя веб-страница отображается слева направо? - PullRequest
Новая
       0

Почему моя веб-страница отображается слева направо?

1 голос
/ 13 марта 2020

Когда я запускаю свою веб-страницу, она отображает ее с заголовком слева и нижним колонтитулом справа, хотя я этого не хочу. Я хочу, чтобы он отображался вниз.

Мой HTML Код: 

<!DOCTYPE html>
<html>
<head>
    <title>Alan Turing</title>
    <link rel="stylesheet" type="text/css" href="MyStyles.css">
</head>
<body>
    <header>
        <h5>Alan Turing</h5>
    </header>
    <nav>
        <a href="Home.html">Home</a>
        <a href="Biography.html"> Biography</a>
        <a href="Quiz.html"> Quiz</a>
        <a href="About.html"> About</a>
    </nav>
    <article>
        <h2>Alan Turing</h2>
        <p>Welcome to my Alan Turing website. Click on Biography to read about him, quiz to havea test about him. Click about to see about this web page and other useful websites.</p>
        <img alt="Alan turing" src="Assets/alanTuring.jpg">
        <p>Above is a picture of Alan Turing, who is famous for cracking the enigma code in World War 2.</p>
        <h3>An overview on who he was</h3>
        <p>Alan Turing was an English mathematician and pioneer of theoretical computer science and artificial intelligence. During WW2, he was instrumental in breaking the German Enigma code, leading to Allied victory over Nazi Germany.</p>
    </article>
</body>

И мой CSS код: 

header {
padding: 35px;
text-align: center;
background:darkgreen;
color: darkgray;
font-size: 40px;
}

nav {
padding: 20px;
background: green;
color: darkgrey;
font-size: 20px
}

article {
padding: 100px;
text-align: center;
background: lightgreen;
}

@import url('https://fonts.googleapis.com/css? 
family=Source+Code+Pro&display=swap');

body {
font-family: 'Source Code Pro', monospace;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}

Я пытался удалить некоторые вещи, например, каждый раздел, но это не сработало.

Заранее спасибо!

Ответы [ 2 ]

4 голосов
/ 13 марта 2020

Вы установили body на display: flex. Направление флексбокса по умолчанию: row. Вот почему ваша страница отображается слева направо. Чтобы изменить это, чтобы ваш родитель Flex отображал свои дочерние элементы в столбце, добавьте эту строку в body: 

body {
  …
  flex-direction: column;
}

Вот небольшая демонстрация, которая поможет проиллюстрировать изменение flex-direction с row (по умолчанию ) до column. 

const container = document.querySelector(".container");
document.querySelector("button").addEventListener("click", () => {
  container.classList.toggle("column");
});
.container {
  min-height: 100vh;
  display: flex;
}

.container.column {
  flex-direction: column;
}

.container > div {
  flex: 1;
}

.left {
  background-color: gray;
}

.right {
  background-color: yellow;
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em 1.5em;
}

html, body { margin: 0; }
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

<button type="button">Change flex direction</button>
2 голосов
/ 13 марта 2020

Удалить display: flex и связанные свойства из body

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...