Правильное форматирование нескольких элементов HTML/CSS
Сейчас работаю над проектом, создавая страницу ставок, которую я просто не могу правильно отформатировать. Я попытался поместить все в отдельный div и поместить эти элементы в flex-контейнер, но когда я это делаю, кажется, что все набрасывается друг на друга.
В настоящее время я пытаюсь получить все между перерывами в свои собственные строки с 4 отдельными столбцами.
Любое понимание того, что я должен изучить, чтобы правильно отформатировать это?
Наверное, ничего не стоит, что любой JS немного выходит за рамки этого проекта.
<!DOCTYPE html>
<html>
<style>
#chuckPage
{
margin:auto;
height: 50%;
width: 50%;
overflow: auto;
background-color: white;
padding: 25px;
border: 5px solid #ac5353;
text-align: center;
}
body
{
background-color: #59a659;
}
</style>
<head>
<meta charset = "ISO-8859-1">
<title>Chuck-A-Luck</title>
</head>
<body>
<div id = "chuckPage">
<h1>Choose your bets!</h1>
<h2>Current Purse: $1,000.00</h2>
<form action = "Die" method = "post">
<input type = "checkbox" name = "singleDie"> Single
<label>Die Select </label>
<select name = "dieSelect">
<option value = "1">1</option>
<option value ='2'>2</option>
<option value ='3'>3</option>
<option value ='4'>4</option>
<option value ='5'>5</option>
<option value ='6'>6</option>
</select>
<input type = "number" name = "singleBetAmt" value = "0" min = "0" max = "1000.0">
<p>1 Correct Die, 1:1, 2 Correct Dice, 2:1, 3 Correct Dice, 12:1</p>
<br><br>
<input type = "checkbox" name = "tripleDie"> Triple
<p>Any of the triples</p>
<input type = "number" name = "tripleBetAmt" value = "0" min = "0" max = "1000.0">
<p>30:1</p>
<br><br>
<input type = "checkbox" name = "bigDie"> Big
<p>Sum of dice is 11 or higher (Doesn't work on triples)</p>
<input type = "number" name = "bigBetAmt" value = "0" min = "0" max = "1000.0">
<p>1:1</p>
<br><br>
<input type = "checkbox" name = "smallDie"> Small
<p>Sum of dice is 10 or lower (Doesn't work on triples)</p>
<input type = "number" name = "smallBetAmt" value = "0" min = "0" max = "1000.0">
<p>1:1</p>
<br><br>
<input type = "checkbox" name = "fieldDie"> Field
<p>Sum of dice is outside of or 8 and 12</p>
<input type = "number" name = "fieldBetAmt" value = "0" min = "0" max = "1000.0">
<p>1:1</p>
<br><br>
<input type = "submit" name = "sendData" value = "Place Your Bet!">
</form>
</div>
</body>
</html>Вот пример, который мне дали для работы.
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
338
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Если вы хотите, чтобы страница результатов выглядела так же, как образец изображения, вы можете изучить тег Стол и указать каждый элемент в строках и столбцах таблицы соответственно. Надеюсь это поможет!!
Ответ принят как подходящий
Таблицы, безусловно, жизнеспособный способ, но давайте рассмотрим flexbox. Немного подправив HTML, мы можем создавать строки и столбцы и добавлять отзывчивость. Добавление отзывчивости с помощью tables возможно, но это не очень приятный опыт разработчика.
В следующем примере я настроил столбцы строк flex, чтобы предположить 25% доступного пространства строк. Когда экран меньше 750px, нет места для 4 столбцов данных, и я изменяю ширину столбца на 50%.
Обязательно тестируйте в режиме Полная страница.
#chuckPage {
margin: auto;
height: 50%;
overflow: auto;
background-color: white;
padding: 25px;
border: 5px solid #ac5353;
text-align: center;
}
body {
background-color: #59a659;
}
form[action = "Die"] {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
form[action = "Die"] .row {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 2px solid gray;
}
form[action = "Die"] .col {
flex-basis: 25%;
text-align: left;
}
@media screen and (max-width: 750px) {
form[action = "Die"] .col {
flex-basis: 50%;
}
}<div id = "chuckPage">
<h1>Choose your bets!</h1>
<h2>Current Purse: $1,000.00</h2>
<form action = "Die" method = "post">
<div class = "row">
<div class = "col">
<input type = "checkbox" name = "singleDie"> Single
<label>Die Select </label>
</div>
<div class = "col">
<select name = "dieSelect">
<option value = "1">1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
</select>
</div>
<div class = "col">
<input type = "number" name = "singleBetAmt" value = "0" min = "0" max = "1000.0">
</div>
<div class = "col">
<p>1 Correct Die, 1:1, 2 Correct Dice, 2:1, 3 Correct Dice, 12:1</p>
<br><br>
</div>
</div>
<div class = "row">
<div class = "col">
<input type = "checkbox" name = "tripleDie"> Triple
</div>
<div class = "col">
<p>Any of the triples</p>
</div>
<div class = "col">
<input type = "number" name = "tripleBetAmt" value = "0" min = "0" max = "1000.0">
</div>
<div class = "col">
<p>30:1</p>
<br><br>
</div>
</div>
<div class = "row">
<div class = "col">
<input type = "checkbox" name = "tripleDie"> Triple
</div>
<div class = "col">
<p>Any of the triples</p>
</div>
<div class = "col">
<input type = "number" name = "tripleBetAmt" value = "0" min = "0" max = "1000.0">
</div>
<div class = "col">
<p>30:1</p>
<br><br>
</div>
</div>
<div class = "row">
<div class = "col">
<input type = "checkbox" name = "tripleDie"> Triple
</div>
<div class = "col">
<p>Any of the triples</p>
</div>
<div class = "col">
<input type = "number" name = "tripleBetAmt" value = "0" min = "0" max = "1000.0">
</div>
<div class = "col">
<p>30:1</p>
<br><br>
</div>
</div>
<div class = "row">
<div class = "col">
<input type = "checkbox" name = "tripleDie"> Triple
</div>
<div class = "col">
<p>Any of the triples</p>
</div>
<div class = "col">
<input type = "number" name = "tripleBetAmt" value = "0" min = "0" max = "1000.0">
</div>
<div class = "col">
<p>30:1</p>
<br><br>
</div>
</div>
</form>
</div>Другие вопросы по теме
Bootstrap 4, удалите пустое пространство рядом с темным столбцом с правой стороны
Как сделать так, чтобы изображение прилипало к низу, только когда раздел не вьюпорт?
Путь обрезки div в соответствии с родительским прямоугольником
Как импортировать файлы CSS в компоненты vue с областью действия, ограниченной только компонентами?
Проблема с размером изображения при наведении
Как показать теги в двойных кавычках?
Как изменить изображения в выбранном div при прокрутке мыши, как эффект параллакса?
Свойство фона css не работает в Chrome и Firefox
Как расположить подчеркивание текста в React Native?
Кнопка расширения в правом верхнем углу
Похожие вопросы
Bootstrap 4, удалите пустое пространство рядом с темным столбцом с правой стороны
Как закрыть сборщик ng-pick-datetime вручную в angular 6?
MaterlizeCSS: невозможно добавить к опции «Выбрать»
Разбор текста csv для создания загрузочных div?
HTML Bootstrap Modal не отображается в переменной javascript
PHP/HTML запоминают выбранное значение после отправки
Как получить доступ к данным в localStorage в приложении для Android
Как сделать так, чтобы изображение прилипало к низу, только когда раздел не вьюпорт?
Как сделать тип ввода TIME 24-часовым форматом?
Перенаправить ссылку в новое окно из html?