Согните каждый элемент одинаковой ширины/высоты

avatar
Johnathan
8 августа 2021 в 17:13
96
2
2

Я работаю над онлайн-программой рубрик и перепробовал почти все, что знал, но безуспешно. Что я пытаюсь сделать, так это сделать каждый столбец в рубрике одинаковой ширины и динамически изменить размер высоты. Поскольку в каждой строке есть 5 столбцов, ширина каждого столбца должна составлять примерно 20% ширины родителя. Сложная часть связана с высотой каждого элемента. Поскольку внутри каждого элемента будет разная длина текста, размер каждого элемента в строке должен измениться до высоты самого длинного элемента в этой строке.

Сейчас я использую flex и безуспешно пытался использовать flex: 1 1 0px и flex-grow: 1; внутри .tile. Я также пытался использовать сетку CSS, где я могу добиться одинаковой ширины, но тогда требования к высоте становятся все шаткими.

Для визуальных людей конечный результат должен выглядеть так.

Любой совет приветствуется.

.print {display: none}
body {margin: 0}

#title {
  max-width: 1880px;
  text-align: center;
  font-size: 35px}
  #title select {
    font-size: 35px;
    appearance: none;
    outline: none;
    border: none;
    -webkit-appearance: none;
    background-color: transparent}


/* --------[RUBRIC]-------- */
#rubric {margin: 10px 25px 55px 25px;}
#rubric textarea {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid black;
  box-sizing: border-box;}

section {display: flex;}

.tile {
  flex: 1 1 0px;
  box-sizing: border-box;
  padding: 5px 10px 20px 10px;
  border-radius: 2px;
  border: 1px solid black;
  font-size: 0.90rem;
  text-align: center}

#rubric input[type=radio] {display: none}
#rubric input:checked + label .tile {background-color: #B488E7}
<form action='rubric.int.php' method='post'>
  <div id='title'>
      Research & Inquiry 
      <select name='usid' onchange='enableButton()' required>
          <option value='' disabled hidden>____________</option>
          <option value='11'>John Doe</option>
      </select>
      <h2 class='print'>August 8th, 2021</h2>
      <hr class='print'>
  </div>
  
  <div id='rubric'>
    <section>
      <div class='category'></div>
      <div class='category'>Beginning</div>
      <div class='category'>Approaching</div>
      <div class='category'>Meeting</div>
      <div class='category'>Exceeding</div>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Inquiry<br><i>6.R.1</i></div>
      </label>
      <input type='radio' id='b_6.R.1' name='score[6.R.1]' value='1'>
      <label for='b_6.R.1'>
          <div class='tile'>Student can choose a topic but may need help <b>constructing questions</b> and <b>using resources</b> to find information.</div>
      </label>
      <input type='radio' id='a_6.R.1' name='score[6.R.1]' value='2'>
      <label for='a_6.R.1'>
          <div class='tile'>Student can ask their own questions but may need help <b>finding information</b>on their topic.</div>
      </label>
      <input type='radio' id='m_6.R.1' name='score[6.R.1]' value='3'>
      <label for='m_6.R.1'>
          <div class='tile'>Student can utilize their own viable research questions to find information about a specific topic.</div>
      </label>
      <input type='radio' id='e_6.R.1' name='score[6.R.1]' value='4'>
      <label for='e_6.R.1'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Recording Info<br><i>6.R.2</i></div>
      </label>
      <input type='radio' id='b_6.R.2' name='score[6.R.2]' value='1'>
      <label for='b_6.R.2'>
          <div class='tile'>Student can take notes using a provided template or organizer <b>with help</b> from the teacher.</div>
      </label>
      <input type='radio' id='a_6.R.2' name='score[6.R.2]' value='2'>
      <label for='a_6.R.2'>
          <div class='tile'>Student can take notes provided by a template or organizer <b>AND</b> can <b>organize</b> those notes for a specific purpose with help from the teacher.</div>
      </label>
      <input type='radio' id='m_6.R.2' name='score[6.R.2]' value='3'>
      <label for='m_6.R.2'>
          <div class='tile'>Student can take and organize notes from various print and/or digital sources.</div>
      </label>
      <input type='radio' id='e_6.R.2' name='score[6.R.2]' value='4'>
      <label for='e_6.R.2'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Reliability<br><i>6.R.3</i></div>
      </label>
      <input type='radio' id='b_6.R.3' name='score[6.R.3]' value='1'>
      <label for='b_6.R.3'>
          <div class='tile'>Student can evaluate the importance of information gathered but may need help establishing credibility.</div>
      </label>
      <input type='radio' id='a_6.R.3' name='score[6.R.3]' value='2'>
      <label for='a_6.R.3'>
          <div class='tile'>Students can evaluate the importance <b>AND credibility</b> of information gathered with help from a teacher.  </div>
      </label>
      <input type='radio' id='m_6.R.3' name='score[6.R.3]' value='3'>
      <label for='m_6.R.3'>
          <div class='tile'>Student can evaluate the relevance and reliability of information gathered.</div>
      </label>
      <input type='radio' id='e_6.R.3' name='score[6.R.3]' value='4'>
      <label for='e_6.R.3'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <input type='hidden' name='standard' value='4'>
    <input type='hidden' name='ucid' value='1'>
    <textarea placeholder='Add comments..' name='comment'></textarea>
    <p class='print'>Comments:</p>
  </div>
    
  <div id='controls' class='center'>
      <button class='button grey-btn' disabled>Record Progress</button>
  </div>
  
</form>
Источник

Ответы (2)

avatar
Tanner Dolby
8 августа 2021 в 17:25
0

Я думаю, что это идеальный вариант использования CSS Grid. Я бы рекомендовал сделать <section> сетку и использовать что-то вроде repeat(5, 20%) или явно использовать 20% 20% 20% 20% 20% для определения grid-template-columns. Вы также можете использовать комбинацию repeat() и minmax() для создания столбцов при построении адаптивных сеток.

Наконец, просто убедитесь, что каждому элементу .tile задано значение height, равное 100 %, чтобы они занимали все пространство по вертикали в каждом элементе сетки.

.print {display: none}
body {margin: 0}

#title {
  max-width: 1880px;
  text-align: center;
  font-size: 35px}
  #title select {
    font-size: 35px;
    appearance: none;
    outline: none;
    border: none;
    -webkit-appearance: none;
    background-color: transparent}


/* --------[RUBRIC]-------- */
#rubric {margin: 10px 25px 55px 25px;}
#rubric textarea {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid black;
  box-sizing: border-box;}

section {
  display: grid;
  /* grid-template-columns: 20% 20% 20% 20% 20%; */
  grid-template-columns: repeat(5, 20%);
  gap: 0;
}

.tile {
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  padding: 5px 10px 20px 10px;
  border-radius: 2px;
  border: 1px solid black;
  font-size: 0.90rem;
  text-align: center}
  

#rubric input[type=radio] {display: none}
#rubric input:checked + label .tile {background-color: #B488E7}
<form action='rubric.int.php' method='post'>
  <div id='title'>
      Research & Inquiry 
      <select name='usid' onchange='enableButton()' required>
          <option value='' disabled hidden>____________</option>
          <option value='11'>John Doe</option>
      </select>
      <h2 class='print'>August 8th, 2021</h2>
      <hr class='print'>
  </div>
  
  <div id='rubric'>
    <section>
      <div class='category'></div>
      <div class='category'>Beginning</div>
      <div class='category'>Approaching</div>
      <div class='category'>Meeting</div>
      <div class='category'>Exceeding</div>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Inquiry<br><i>6.R.1</i></div>
      </label>
      <input type='radio' id='b_6.R.1' name='score[6.R.1]' value='1'>
      <label for='b_6.R.1'>
          <div class='tile'>Student can choose a topic but may need help <b>constructing questions</b> and <b>using resources</b> to find information.</div>
      </label>
      <input type='radio' id='a_6.R.1' name='score[6.R.1]' value='2'>
      <label for='a_6.R.1'>
          <div class='tile'>Student can ask their own questions but may need help <b>finding information</b>on their topic.</div>
      </label>
      <input type='radio' id='m_6.R.1' name='score[6.R.1]' value='3'>
      <label for='m_6.R.1'>
          <div class='tile'>Student can utilize their own viable research questions to find information about a specific topic.</div>
      </label>
      <input type='radio' id='e_6.R.1' name='score[6.R.1]' value='4'>
      <label for='e_6.R.1'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Recording Info<br><i>6.R.2</i></div>
      </label>
      <input type='radio' id='b_6.R.2' name='score[6.R.2]' value='1'>
      <label for='b_6.R.2'>
          <div class='tile'>Student can take notes using a provided template or organizer <b>with help</b> from the teacher.</div>
      </label>
      <input type='radio' id='a_6.R.2' name='score[6.R.2]' value='2'>
      <label for='a_6.R.2'>
          <div class='tile'>Student can take notes provided by a template or organizer <b>AND</b> can <b>organize</b> those notes for a specific purpose with help from the teacher.</div>
      </label>
      <input type='radio' id='m_6.R.2' name='score[6.R.2]' value='3'>
      <label for='m_6.R.2'>
          <div class='tile'>Student can take and organize notes from various print and/or digital sources.</div>
      </label>
      <input type='radio' id='e_6.R.2' name='score[6.R.2]' value='4'>
      <label for='e_6.R.2'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Reliability<br><i>6.R.3</i></div>
      </label>
      <input type='radio' id='b_6.R.3' name='score[6.R.3]' value='1'>
      <label for='b_6.R.3'>
          <div class='tile'>Student can evaluate the importance of information gathered but may need help establishing credibility.</div>
      </label>
      <input type='radio' id='a_6.R.3' name='score[6.R.3]' value='2'>
      <label for='a_6.R.3'>
          <div class='tile'>Students can evaluate the importance <b>AND credibility</b> of information gathered with help from a teacher.  </div>
      </label>
      <input type='radio' id='m_6.R.3' name='score[6.R.3]' value='3'>
      <label for='m_6.R.3'>
          <div class='tile'>Student can evaluate the relevance and reliability of information gathered.</div>
      </label>
      <input type='radio' id='e_6.R.3' name='score[6.R.3]' value='4'>
      <label for='e_6.R.3'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <input type='hidden' name='standard' value='4'>
    <input type='hidden' name='ucid' value='1'>
    <textarea placeholder='Add comments..' name='comment'></textarea>
    <p class='print'>Comments:</p>
  </div>
    
  <div id='controls' class='center'>
      <button class='button grey-btn' disabled>Record Progress</button>
  </div>
  
</form>

Редактировать: в вашем источнике из pastebin отсутствует закрывающий тег </html>.

<body>
    <title>Presentations Rubric</title>
    <link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>
    <form id='rubric' action='rubric.int.php' method='post'>
        <div id='title'>
            Presentations 
            <select name='usid' onchange='enableButton()' required>
                <option value='' disabled hidden>____________</option>
                <option value='11'>John Doe</option>
            </select>
            <h2 class='print'>August 8th, 2021</h2>
            <hr class='print'>
        </div>
        <div id='rubric'>
            <section>
                <div class='category'></div>
                <div class='category'>Beginning</div>
                <div class='category'>Approaching</div>
                <div class='category'>Meeting</div>
                <div class='category'>Exceeding</div>
            </section>
            <section>
                <input type='radio' id='5' disabled>
                <label for='5'>
                    <div class='tile'>
                        Using Technology
                        <br>
                        <i>7.W.1</i>
                    </div>
                </label>
                <input type='radio' id='b_7.W.1' name='score[7.W.1]' value='1'>
                <label for='b_7.W.1'>
                    <div class='tile'>
                        Student 
                        <b>needs guidance and support</b>
                         to create multimodal content that effectively communicates an idea using appropriate technology and media.
                    </div>
                </label>
                <input type='radio' id='a_7.W.1' name='score[7.W.1]' value='2'>
                <label for='a_7.W.1'>
                    <div class='tile'>
                        Student 
                        <b>attempts</b>
                         to create multimodal content that effectively communicates an idea using appropriate technology and media.
                    </div>
                </label>
                <input type='radio' id='m_7.W.1' name='score[7.W.1]' value='3'>
                <label for='m_7.W.1'>
                    <div class='tile'>Student will create multimodal content that effectively communicates an idea using appropriate technology and media.</div>
                </label>
                <input type='radio' id='e_7.W.1' name='score[7.W.1]' value='4'>
                <label for='e_7.W.1'>
                    <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
                </label>
            </section>
            <section>
                <input type='radio' id='5' disabled>
                <label for='5'>
                    <div class='tile'>
                        Presentation Creation
                        <br>
                        <i>7.W.2</i>
                    </div>
                </label>
                <input type='radio' id='b_7.W.2' name='score[7.W.2]' value='1'>
                <label for='b_7.W.2'>
                    <div class='tile'>
                        Student 
                        <b>needs guidance and support</b>
                         to create presentations that integrate visual displays and other multimedia to enrich the presentation. 
                    </div>
                </label>
                <input type='radio' id='a_7.W.2' name='score[7.W.2]' value='2'>
                <label for='a_7.W.2'>
                    <div class='tile'>
                        Student 
                        <b>attempts</b>
                         to create presentations that integrate visual displays and other multimedia to enrich the presentation.
                    </div>
                </label>
                <input type='radio' id='m_7.W.2' name='score[7.W.2]' value='3'>
                <label for='m_7.W.2'>
                    <div class='tile'>Student will create presentations that integrate visual displays and other multimedia to enrich the presentation. 
                    </div>
                </label>
                <input type='radio' id='e_7.W.2' name='score[7.W.2]' value='4'>
                <label for='e_7.W.2'>
                    <div class='tile'>Student meeting all requirements with a degree of excellency. 
                    </div>
                </label>
            </section>
            <section>
                <input type='radio' id='5' disabled>
                <label for='5'>
                    <div class='tile'>
                        Presentation Skills
                        <br>
                        <i>1.W.1</i>
                    </div>
                </label>
                <input type='radio' id='b_1.W.1' name='score[1.W.1]' value='1'>
                <label for='b_1.W.1'>
                    <div class='tile'>
                        Student attempts to give 
                        <b>simple</b>
                         presentations in a group or individually, organizing information and determining appropriate content for audience with 
                        <b>full guidance and support</b>
                        .
                    </div>
                </label>
                <input type='radio' id='a_1.W.1' name='score[1.W.1]' value='2'>
                <label for='a_1.W.1'>
                    <div class='tile'>
                        Student gives presentations in a group or individually, organizing information and determining appropriate content for audience with 
                        <b>some guidance and support</b>
                        . 
                    </div>
                </label>
                <input type='radio' id='m_1.W.1' name='score[1.W.1]' value='3'>
                <label for='m_1.W.1'>
                    <div class='tile'>Student give presentations in a group or individually, organizing information and determining appropriate content for audience.</div>
                </label>
                <input type='radio' id='e_1.W.1' name='score[1.W.1]' value='4'>
                <label for='e_1.W.1'>
                    <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
                </label>
            </section>
            <input type='hidden' name='standard' value='5'>
            <input type='hidden' name='ucid' value='1'>
            <textarea placeholder='Add comments..' name='comment'></textarea>
            <p class='print'>Comments:</p>
        </div>
        <div id='controls'>
            <button class='button grey-btn' disabled>Record Progress</button>
        </div>
    </form>
</body>
</html>
 
<style>
.print {
    display: none
}
 
body {
    margin: 0
}
 
#title {
    padding: 20px 0px;
    text-align: center;
    font-size: 35px
}
 
#title select {
    font-size: 35px;
    appearance: none;
    outline: none;
    border: none;
    -webkit-appearance: none;
    background-color: transparent
}
/* --------[RUBRIC]-------- */
 
#rubric {
    margin: 10px 25px 0px 25px;
}
 
#rubric textarea {
    width: 100%;
    border: 1px solid black;
    box-sizing: border-box;
}
 
section {
    display: grid;
    grid-template-columns: repeat(5, 20%);
    gap: 0;
}
 
.tile {
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
    padding: 5px 10px 20px 10px;
    border-radius: 2px;
    border: 1px solid black;
    font-size: 0.90rem;
    text-align: center
}
 
.tile:hover:not(.category) {
    background-color: #D4BBF1;
    transform: scale(1.03);
}
 
.category {
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
}
 
section input[type=radio] {
    display: none
}
 
section input:checked + label .tile {
    background-color: #B488E7
}
 
#controls {
    margin-top: 20px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
}
/* --------[PRINT]-------- */
 
.print {
    display: none
}
 
@media print {
    body {
        margin: 10px
    }
 
    .print {
        display: block
    }
 
    select {
        display: none
    }
 
    h2 {
        margin: 0;
        text-align: center;
        font-size: 20px
    }
 
    .category {
        padding-top: 50px;
    }
 
    .tile {
        font-size: 12px !important;
    }
 
    textarea {
        display: none
    }
 
    .center {
        display: none
    }
}
</style>
Johnathan
8 августа 2021 в 17:50
0

Когда я запускаю фрагмент, это работает четко, но когда я развертываю код на своем сайте, высота каждого элемента снова становится шаткой. Что я делаю не так? Вот исходник: pastebin.com/TzUduLfL --- Вот картинка imgur.com/a/iD2gSqp

Tanner Dolby
8 августа 2021 в 17:53
0

@Johnathan Это потому, что ваш селектор .tile в CSS не имеет height: 100%, как я упоминал выше. Попробуйте обновить это в своем исходном коде CSS (L182 из pastebin), и он должен работать должным образом.

Johnathan
8 августа 2021 в 18:03
0

Я вставил не тот источник, мои извинения. Вот что есть в сети, но проблема осталась. pastebin.com/faxPMm1S. Мне не хватает процессора, который StackOverflow может включать автоматически? Я не понимаю, почему это работает здесь, но не онлайн.

Tanner Dolby
8 августа 2021 в 18:07
0

@Johnathan В вашем исходном коде pastebin отсутствовал закрывающий тег </html>. Как только это было добавлено, сетка работает так, как здесь. Я добавил дополнительный фрагмент с обновленным pastebin (добавлен закрывающий тег и переполнение: автоматически добавлено в .tile) ниже исходного фрагмента в моем ответе для справки.

Johnathan
8 августа 2021 в 18:42
1

Ты восхитителен!! Спасибо. Забавно, как одна маленькая бирка заставила его сломаться. Я ценю ваше терпение!

avatar
Ozik Jarwo
8 августа 2021 в 17:31
0

Все, что вам нужно сделать, это указать display:flex для одинаковой высоты, flex-direction: column для аккуратности и flex: 1 1 0px для одинаковой ширины (20% экрана) для каждого дочернего элемента section (используя section * для выбора всех дочерних элементов раздела).

.print {display: none}
body {margin: 0}

#title {
  max-width: 1880px;
  text-align: center;
  font-size: 35px}
  #title select {
    font-size: 35px;
    appearance: none;
    outline: none;
    border: none;
    -webkit-appearance: none;
    background-color: transparent}


/* --------[RUBRIC]-------- */
#rubric {margin: 10px 25px 55px 25px;}
#rubric textarea {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid black;
  box-sizing: border-box;}

section {display: flex;}

section * {
    display:flex;
    flex-direction: column;
    flex: 1 1 0px;
}

.tile {
  flex: 1 1 0px;
  box-sizing: border-box;
  padding: 5px 10px 20px 10px;
  border-radius: 2px;
  border: 1px solid black;
  font-size: 0.90rem;
  text-align: center}

#rubric input[type=radio] {display: none}
#rubric input:checked + label .tile {background-color: #B488E7}
<form action='rubric.int.php' method='post'>
  <div id='title'>
      Research & Inquiry 
      <select name='usid' onchange='enableButton()' required>
          <option value='' disabled hidden>____________</option>
          <option value='11'>John Doe</option>
      </select>
      <h2 class='print'>August 8th, 2021</h2>
      <hr class='print'>
  </div>
  
  <div id='rubric'>
    <section>
      <div class='category'></div>
      <div class='category'>Beginning</div>
      <div class='category'>Approaching</div>
      <div class='category'>Meeting</div>
      <div class='category'>Exceeding</div>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Inquiry<br><i>6.R.1</i></div>
      </label>
      <input type='radio' id='b_6.R.1' name='score[6.R.1]' value='1'>
      <label for='b_6.R.1'>
          <div class='tile'>Student can choose a topic but may need help <b>constructing questions</b> and <b>using resources</b> to find information.</div>
      </label>
      <input type='radio' id='a_6.R.1' name='score[6.R.1]' value='2'>
      <label for='a_6.R.1'>
          <div class='tile'>Student can ask their own questions but may need help <b>finding information</b>on their topic.</div>
      </label>
      <input type='radio' id='m_6.R.1' name='score[6.R.1]' value='3'>
      <label for='m_6.R.1'>
          <div class='tile'>Student can utilize their own viable research questions to find information about a specific topic.</div>
      </label>
      <input type='radio' id='e_6.R.1' name='score[6.R.1]' value='4'>
      <label for='e_6.R.1'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <section>
      <input type='radio' id='4' disabled>
      <label for='4'>
          <div class='tile'>Recording Info<br><i>6.R.2</i></div>
      </label>
      <input type='radio' id='b_6.R.2' name='score[6.R.2]' value='1'>
      <label for='b_6.R.2'>
          <div class='tile'>Student can take notes using a provided template or organizer <b>with help</b> from the teacher.</div>
      </label>
      <input type='radio' id='a_6.R.2' name='score[6.R.2]' value='2'>
      <label for='a_6.R.2'>
          <div class='tile'>Student can take notes provided by a template or organizer <b>AND</b> can <b>organize</b> those notes for a specific purpose with help from the teacher.</div>
      </label>
      <input type='radio' id='m_6.R.2' name='score[6.R.2]' value='3'>
      <label for='m_6.R.2'>
          <div class='tile'>Student can take and organize notes from various print and/or digital sources.</div>
      </label>
      <input type='radio' id='e_6.R.2' name='score[6.R.2]' value='4'>
      <label for='e_6.R.2'>
          <div class='tile'>Student meeting all requirements with a degree of excellency. </div>
      </label>
    </section>
    <input type='hidden' name='standard' value='4'>
    <input type='hidden' name='ucid' value='1'>
    <textarea placeholder='Add comments..' name='comment'></textarea>
    <p class='print'>Comments:</p>
  </div>
    
  <div id='controls' class='center'>
      <button class='button grey-btn' disabled>Record Progress</button>
  </div>
  
</form>