Попытка выровнять HTML-элементы по диагонали и сделать их все одинакового размера. - PullRequest
Новая
       16

Попытка выровнять HTML-элементы по диагонали и сделать их все одинакового размера.

1 голос
/ 26 апреля 2019

Так что в основном я пытаюсь создать красивую заставку, и дизайнеру нужны ссылки диагональные, круглые и все одинакового размера, <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 круга будут правильно выстроены и будут одинаковой ширины и высоты. Заранее спасибо за чью-либо помощь.

Ответы [ 2 ]

0 голосов
/ 26 апреля 2019

Попробуйте это 

/*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>
0 голосов
/ 26 апреля 2019

Включая ширину и высоту необходимо было сделать их одинакового размера и в форме круга. Затем я удалил 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);
}
<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" class="circle">
          <p>New Solicitor</p>
        </div>
        <div id="patronCircle" class="circle">
          <p>Patron</p>
        </div>
        <div id="alchemistCircle" class="circle">
          <p>Alchemist</p>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...