раскладка столов в css - PullRequest
Новая
       7

раскладка столов в css

1 голос
/ 02 мая 2020

Я пытался заставить макет карты go работать в html. Я хочу узнать более эффективные способы размещения контента в css. В сети много и много примеров, но я не уверен, какой из способов лучше выбрать.

В этом случае я пытался показать карту bin go. Идея состоит в том, чтобы ввести цифры в данный момент. Я хочу сделать это красиво, а потом распечатать.

html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bingo</title>

    <link rel="stylesheet" type="text/css" href="styles.css" />

    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
</head>

<body>
    <h1>Card</h1>

    <p>15 numbers out of 30</p>

    <div class="card">
        <div class="card-grid">
            <div class="card-row">
                <div class="card-number">
                    <input type="text" class="editable-number" value="1">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="10">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="30">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="50">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="70">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
            </div>
            <div class="card-row">
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="23">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="41">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="64">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="83">
                </div>
            </div>
            <div class="card-row">
                <div class="card-number">
                    <input type="text" class="editable-number" value="9">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="19">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="39">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="59">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="70">
                </div>
                <div class="card-number">
                    <input type="text" class="editable-number" value="90">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

css

:root {
    --number-width: 60px;
    --row-height: 40px;
}

body {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 1em;
}

.card {
    max-width: 600px;

    padding: 10px;


    background-color: rgb(255, 5, 5);
    border: solid 3px black;
    border-radius: 5px;
}

.card-grid {
}

.card-row {
    display: block;
    margin-bottom: 5px;
}

.card-number {

    display: inline-block;

    width: var(--number-width);
    max-width: var(--number-width);

    background-color: white;
}



.editable-number {
    width: var(--number-width);
    height: var(--row-height);

    text-align: center;
    border: none;
    font-size: 1.5em;
}

результат

bin go-результат

вопросов

I хочу центрировать числа в сетке. Я играл с преобразованием css, но это отображало содержимое за пределами красного прямоугольника div.

Каков наилучший подход к размещению такого табличного представления в html - без таблицы?

В идеале я хочу увеличить это, чтобы делать больше вещей по мере обучения.

Ответы [ 2 ]

1 голос
/ 03 мая 2020

Использование CSS CSS Макет Flexbox 

:root {
  --number-width: 60px;
  --row-height: 40px;
}

body {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 1em;
}

.card {
  max-width: 600px;
  padding: 10px;
  background-color: rgb(255, 5, 5);
  border: solid 3px black;
  border-radius: 5px;
}

.card-grid {
  /* CSS Flexbox Layout using display: flex*/
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-row {
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.card-number {
  display: inline-block;
  width: var(--number-width);
  max-width: var(--number-width);
  background-color: white;
  overflow: hidden;
}

.editable-number {
  width: var(--number-width);
  height: var(--row-height);
  text-align: center;
  border: none;
  font-size: 1.5em;
  box-sizing: border-box;
}
<div class="card">
  <div class="card-grid">
    <div class="card-row">
      <div class="card-number">
        <input type="text" class="editable-number" value="1">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="10">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="30">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="50">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="70">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
    </div>
    <div class="card-row">
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="23">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="41">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="64">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="83">
      </div>
    </div>
    <div class="card-row">
      <div class="card-number">
        <input type="text" class="editable-number" value="9">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="19">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="39">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="59">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="70">
      </div>
      <div class="card-number">
        <input type="text" class="editable-number" value="90">
      </div>
    </div>
  </div>
</div>
0 голосов
/ 03 мая 2020

присвойте сетке карты фиксированную ширину и укажите ее и поле авто

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...