Question

因此，基本上，我试图创建一个漂亮的启动页面，设计人员希望对角线，圆形和所有相同大小的链接都是<p>链接，但是如何使它们全部对角线和所有相同大小的圆圈？

我尝试了很多不同的flexbox组合，但我还没有尝试CSS网格，这将是我接下来要尝试的

。

/*variable declarations*/

:root {
  --teal: #37C8AB;
  --white: #ffffff;
  --black: #000000;
  --lilac: #B380FF;
  --purple: #7137C8;
  --aqua: #008066;
}

/*page body*/
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.page-container {
  background: var(--lilac);
  margin-top: 10px;
  padding-bottom: 5em;
  padding-left: 2em;
  padding-top: 5.8em;
}

/*Text Conatiner*/

.tcontainer-frame {
  background: var(--purple);
  border: var(--black) 2px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
}

.tcontainer {
  background: var(--black);
  font-size: 24px;
  padding: 12em 1em;
  text-align: center;
}

.teal-font {
  color: var(--teal);
}

/*Link container*/
.link-container {
  display: flex;
  flex-flow: column wrap;
  padding: 4em;
  text-align: center;
}

#newSolCircle {
  align-items: center;
  align-self: flex-start;
  background: var(--teal);
  border-radius: 100%;
  display: flex;
  flex: 1 1 0;
  justify-content: center; 
  margin: 2em;
  padding: 1em;
}

#patronCircle {
  align-items: center;
  align-self: center;
  background: var(--aqua);
  border-radius: 100%;
  display: flex;
  flex: 1 1 0;
  margin: 2em;
  padding: 1em;
}

#alchemistCircle {
  align-items: center;
  align-self: flex-end;
  background: var(--purple);
  border-radius: 100%;
  display: flex;
  flex: 1 1 0;
  margin: 2em;
  padding: 1em;
}

<body class="bg-dark">
  <div class="container-fluid page-container">
    <div class="row">
      <div class="col-6 tcontainer-frame">
        <div class="tcontainer"><span class="teal-font">Hello. You have landed on the Image Alchemists' web portal. We
            welcome
            you. Please make your
            selection to the right.</span>
        </div>
      </div>
      <div class="col-6 link-container">
        <div id="newSolCircle">
          <p>New Solicitor</p>
        </div>
        <div id="patronCircle">
          <p>Patron</p>
        </div>
        <div id="alchemistCircle">
          <p>Alchemist</p>
        </div>
      </div>
    </div>
  </div>
</body>

我只是希望使这3个圆正确对齐，并使它们的宽度和高度相同。预先感谢任何人的帮助。

Answer 1

必须包括宽度和高度，以使其具有相同的大小和圆形。然后我删除了scanf，因为仅flex: 1 1 0;属性就可以解决宽度和高度问题。

align-items

:root {
  --teal: #37C8AB;
  --white: #ffffff;
  --black: #000000;
  --lilac: #B380FF;
  --purple: #7137C8;
  --aqua: #008066;
}


/*page body*/

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.page-container {
  background: var(--lilac);
  margin-top: 10px;
  padding-bottom: 5em;
  padding-left: 2em;
  padding-top: 5.8em;
}


/*Text Conatiner*/

.tcontainer-frame {
  background: var(--purple);
  border: var(--black) 2px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
}

.tcontainer {
  background: var(--black);
  font-size: 24px;
  padding: 12em 1em;
  text-align: center;
}

.teal-font {
  color: var(--teal);
}


/*Link container*/

.link-container {
  display: flex;
  flex-flow: column wrap;
  padding: 4em;
  text-align: center;
}

.circle {
  border-radius: 100%;
  display: flex;
  height: 50px;
  width: 50px;
  margin: 2em;
  padding: 1em;
  justify-content: center;
}

#newSolCircle {
  align-items: center;
  align-self: flex-start;
  background: var(--teal);
}

#patronCircle {
  align-items: center;
  align-self: center;
  background: var(--aqua);
}

#alchemistCircle {
  align-items: center;
  align-self: flex-end;
  background: var(--purple);
}

Answer 2

尝试一下

/*variable declarations*/

:root {
  --teal: #37C8AB;
  --white: #ffffff;
  --black: #000000;
  --lilac: #B380FF;
  --purple: #7137C8;
  --aqua: #008066;
}

/*page body*/
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.page-container {
  background: var(--lilac);
  margin-top: 10px;
  padding-bottom: 5em;
  padding-left: 2em;
  padding-top: 5.8em;
}

/*Text Conatiner*/

.tcontainer-frame {
  background: var(--purple);
  border: var(--black) 2px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
}

.tcontainer {
  background: var(--black);
  font-size: 24px;
  padding: 12em 1em;
  text-align: center;
}

.teal-font {
  color: var(--teal);
}

/*Link container*/
.link-container {
  display: flex;
  flex-flow: column wrap;
  padding: 4em;
  text-align: center;
}

.circle {
  align-items: center;
  align-self: flex-start;
  background: var(--teal);
  border-radius: 100%;
  display: flex;
  /* flex: 1 1 0; */
  justify-content: center; 
  /* margin: 2em;
  padding: 1em; */
  height: 150px;
  width: 150px;
}
#newSolCircle {
  display: flex;
  justify-content: flex-start;
}
#patronCircle {
  display: flex;
  justify-content: center;
}
#patronCircle .circle {
  background: var(--aqua);
}
#alchemistCircle {
  display: flex;
  justify-content: flex-end;
}
#alchemistCircle .circle {
  background: var(--purple);
}

<body class="bg-dark">
  <div class="container-fluid page-container">
    <div class="row">
      <div class="col-6 tcontainer-frame">
        <div class="tcontainer"><span class="teal-font">Hello. You have landed on the Image Alchemists' web portal. We
            welcome
            you. Please make your
            selection to the right.</span>
        </div>
      </div>
      <div class="col-6">
        <div class="link-container">
          <div id="newSolCircle">
            <p class="circle">New Solicitor</p>
          </div>
          <div id="patronCircle">
            <p class="circle">Patron</p>
          </div>
          <div id="alchemistCircle">
            <p class="circle">Alchemist</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

尝试将HTML元素对角对齐，并使所有元素的大小相同

2 个答案: