为什么 Flexbox 容器没有改变位置?

问题描述 投票:0回答:1

我正在尝试为我的网页制作一个 2x2 Flexbox 容器,用于保存图像和指向我网站其他部分的链接。我制作了容器,但无论我做什么,似乎都无法让容器移动。我尝试调整边距、填充和它的位置,但没有任何东西可以调整容器的位置。

CodePen:https://codepen.io/Dara-Jackson/pen/dyLZvKR

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Dara Jackson - Designer</title>
</head>

<body>
    <!-- nav bar -->
    <div class="nav">
        <a class="link"
            href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/index.html">Work</a>
        <a class="link"
            href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/about.html">About</a>
        <a class="link"
            href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/about.html">Contact</a>
    </div>
    <!-- end of nav bar -->

    <div class="container">
        <div class="row">
          <div class="box"><a href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/motion.html">Link 1</a></div>
          <div class="box"><a href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/visid.html">Link 2</a></div>
        </div>
        <div class="row">
          <div class="box"><a href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/p5js.html">Link 3</a></div>
          <div class="box"><a href="https://artfiles.rutgers.edu/~rad%5cdmj185/Dara%20-%20Portfolio%20Website%20%28WIP%29/miscdesigns.html">Link 4</a></div>
        </div>
      </div>
</body>
</html>

CSS:

.container {
  display: flex;
  flex-direction: column;
  padding-top: 70px;
  padding-left: 70px;
  margin-left: 70px;
}

.row {
  display: flex;
  flex-direction:row;
}

.box {
  /* width: 100px;
  height: 100px; */
  background-color:#cccccc;
  border: 1px solid black;
  display: flex;
  /* justify-content: center;
  align-items: center; */
  margin-top:1px;
  padding:200px;
}
html css flexbox
1个回答
0
投票

您需要删除“*/”=> enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.