Как организовать элементы вокруг другого? - PullRequest
Новая
       15

Как организовать элементы вокруг другого?

0 голосов
/ 26 января 2020

Я пытаюсь создать копию первой страницы Википедии на английском языке sh. Как вы знаете, ar c -образные языки появляются вокруг lo go, и это то, чего я хотел бы достичь.

This is what I want

Я пробовал с сеткой, так как я не хотел бы, чтобы у нее были такие акцентированные поля, но я не могу думать ни о чем другом. 

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li a {
  text-decoration: none;
}

.header__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.header__container h1.header__container--title,
.header__container h2.header__container--subtitle {
  margin-bottom: 0;
  margin-top: 0;
}

h1.header__container--title {
  font-size: 2.5em;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
}

h2.header__container--subtitle {
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
}

.main__container {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  gap: 10px;
}

.main__container--logo img {
  width: 200px;
  height: 183px;
}

ul.main__container--langs1 {
  display: grid;
}
ul.main__container--langs1:nth-child(1) {
  justify-content: end;
}

/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <meta name="author" content="Diesan Romero" />
  <meta name="description" content="Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation." />

  <link rel="shortcut icon" href="assets/images/wikipedia.ico" type="image/x-icon" />
  <link rel="apple-touch-icon" href="assets/images/wikipedia.png" />
  <link rel="stylesheet" href="assets/styles/main.css" />
  <title>Wikipedia</title>
</head>

<body>
  <header>
    <div class="header__container">
      <h1 title="Wikipedia" class="header__container--title">Wikipedia</h1>
      <h2 title="Wikipedia" class="header__container--subtitle">The Free Encyclopedia</h2>
    </div>
  </header>

  <main>
    <div class="main__container">
      <ul class="main__container--langs1">
        <li>
          <a href="/"> English </a>
          <small>1 090 000+ articles</small>
        </li>
        <li>
          <a href="/"> 日本語 </a>
          <small>1 090 000+ articles</small>
        </li>
        <li>
          <a href="/"> Русский </a>
          <small>1 090 000+ articles</small>
        </li>
        <li>
          <a href="/"> Italiano </a>
          <small>1 090 000+ articles</small>
        </li>
        <li>
          <a href="/"> Português </a>
          <small>1 090 000+ articles</small>
        </li>
      </ul>

      <div class="main__container--logo">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/800px-Wikipedia-logo-v2.svg.png" alt="Wikipedia Logo" />
      </div>

      <ul class="main__container--langs2">
        <li>
          <a href="/"> Español </a>
          <small>1 090 000+ articles</small>
        </li>
        <li>
          <a href="/"> Deutsch </a>
          <small>1 090 000+ articles</small>
        </li>
        <li>
          <a href="/"> Français </a>
          <small>1 090 000+ articles</small>
        </li>
        <li>
          <a href="/"> 中文 </a>
          <small>1 090 000+ articles</small>
        </li>
        <li>
          <a href="/"> Polski </a>
          <small>1 090 000+ articles</small>
        </li>
      </ul>
    </div>
  </main>
</body>

</html>

У вас есть идеи, как это сделать? Я только учусь css сетки.

1 Ответ

1 голос
/ 26 января 2020

Я не думаю, что это возможно сделать с помощью сетки, потому что изображение из Википедии - квадрат. Я бы предложил использовать position: absolute; на каждом из <li> элементов. Чем использовать верхнюю, левую, нижнюю или правую позицию, чтобы расположить их.

Извините за сетку, хотя.

...