Question

运行网页时，即使我不希望它显示，它的标题也位于左侧，而页脚位于右侧。我希望它向下显示。

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

我尝试删除某些内容，例如每个部分，但是没有用。

谢谢！

Answer 1

您已将body设置为display: flex。 Flexbox的默认方向是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>

Answer 2

从display: flex删除body和相关属性

为什么我的网页从左到右显示？

2 个答案: