Как вывести карточки в три столбца?
Здравствуйте. Имеется код:
let userProf = '<ul style="list-style-type: none">'; for (let i = 0; i < DATA.length; i++) { userProf += "<div class="textcols-item show-modal">" + "<div class="trigger">" + "<h3>" + DATA[i].name + "</h3>" + "<br>" + "<br>" + "<i class="icono-iphone"></i>" + "&nbsp" + "&nbsp" + "<span>" + DATA[i].phone + "</span>" + "<br>" + "<br>" + "<i class="icono-mail"></i>" + "&nbsp" + "&nbsp" + "<span>" + DATA[i].email + "</span>" + "</div>" + "</div>" + "&nbsp" ; } document.getElementById("result").innerHTML = userProf; document.getElementById('search').onkeyup = function() { document.getElementById('result').innerHTML = ''; let searchText = this.value.toLowerCase(); let stringLength = searchText.length; if (stringLength > 1) { for (let i = 0; i < DATA.length; i++) { let userName = DATA[i].name.split('').slice(0, stringLength).join('').toLowerCase(); let userPhone = DATA[i].phone.split('').slice(0, stringLength).join('').toLowerCase(); let userEmail = DATA[i].email.split('').slice(0, stringLength).join('').toLowerCase(); if (userName == searchText || userEmail == searchText) { document.getElementById('result').innerHTML += "<ul style="list-style-type: none">" + "<div class="trigger">" + "<li class='list'>" + "<h3>" + DATA[i].name + "</h3>" + "<br>" + "<br>" + "<i class="icono-iphone"></i>" + "&nbsp" + "&nbsp" + "<span>" + DATA[i].phone + "</span>" + "<br>" + "<br>" + "<i class="icono-mail"></i>" + "&nbsp" + "&nbsp" + "<span>" + DATA[i].email + "</span>" + "</li>" + "</div>" + "</div>" + "</ul>" + "<br>" + "<br>"; } } } else { document.getElementById("result").innerHTML = userProf; } }; |
let userProf = '<ul style="list-style-type: none">'; for (let i = 0; i < DATA.length; i++) { userProf += "<div class="textcols-item show-modal">" + "<div class="trigger">" + "<h3>" + DATA[i].name + "</h3>" + "<br>" + "<br>" + "<i class="icono-iphone"></i>" + "&nbsp" + "&nbsp" + "<span>" + DATA[i].phone + "</span>" + "<br>" + "<br>" + "<i class="icono-mail"></i>" + "&nbsp" + "&nbsp" + "<span>" + DATA[i].email + "</span>" + "</div>" + "</div>" + "&nbsp" ; } document.getElementById("result").innerHTML = userProf; document.getElementById('search').onkeyup = function() { document.getElementById('result').innerHTML = ''; let searchText = this.value.toLowerCase(); let stringLength = searchText.length; if (stringLength > 1) { for (let i = 0; i < DATA.length; i++) { let userName = DATA[i].name.split('').slice(0, stringLength).join('').toLowerCase(); let userPhone = DATA[i].phone.split('').slice(0, stringLength).join('').toLowerCase(); let userEmail = DATA[i].email.split('').slice(0, stringLength).join('').toLowerCase(); if (userName == searchText || userEmail == searchText) { document.getElementById('result').innerHTML += "<ul style="list-style-type: none">" + "<div class="trigger">" + "<li class='list'>" + "<h3>" + DATA[i].name + "</h3>" + "<br>" + "<br>" + "<i class="icono-iphone"></i>" + "&nbsp" + "&nbsp" + "<span>" + DATA[i].phone + "</span>" + "<br>" + "<br>" + "<i class="icono-mail"></i>" + "&nbsp" + "&nbsp" + "<span>" + DATA[i].email + "</span>" + "</li>" + "</div>" + "</div>" + "</ul>" + "<br>" + "<br>"; } } } else { document.getElementById("result").innerHTML = userProf; } };
На страницу вывод поиск и карточки, но карточки в один столбец. Как сделать, чтобы они были по центру в три столбца? Спасибо!
css:
.trigger { color: black; padding: 12px 8px; font-size: 17px; font-weight: bold; cursor: pointer; width: 340px; height: 350px; border-radius: 25px; border: 2px solid #fdfdfd; box-shadow: 0px 0px 11px 1px rgba(82, 80, 80, 0.78), 0px 0px 4px 1px rgba(27, 25, 25, 0.66); } .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; background-color: white; padding: 6rem; border-radius: 5px; box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3); z-index: 10; } .close-modal { position: absolute; top: 1.2rem; right: 2rem; font-size: 5rem; color: #333; cursor: pointer; border: none; background: none; } .hidden { display: none; } .textcols { white-space: nowrap; } .textcols-item { white-space: normal; width: 33.333%; vertical-align: top; justify-content: center; max-width: 100px; border-width: 5px; } .textcols .textcols-item:first-child { margin-right: 100%; } .name { font-weight: 900; } .main { width: 100%; margin: 0; } ::selection { color: #fff; background: #664AFF } .wrapper { max-width: 1000px; margin: 15px auto; } .wrapper .search-input{ background: #fff; width: 100%; border-radius : 25px; position: relative; box-shadow: Opx 1px 5px 3px rgba(0,0,0,0. 12); } .search-input input { height: 55px; width: 100%; outline: none; border: none; border-radius: 500px; padding: 0 60px 0 20px; font-size: 18px; box-shadoW: 0px 1px 5px rgba(0,0,0,0.1); z-index: 1; position: relative; } .search-input.active input{ border-radius : 5px 5px 0 0; } .search-input .autocom-box{ padding: 0; opacity: 0; pointer-events: none; max-height: 500px; overflow-y: auto; background-color: #ffffff; border-radius : 0 0 5px 5px; position: absolute; width: 100%; } .search-input.active .autocom-box{ padding: 10px 8px; opacity: 1; pointer-events: auto ; } .autocom-box li { list-style: none; padding: 8px 12px; display: none; width: 100%; cursor: default; border-radius: 3px; } .search-input.active .autocom-box li{ display: block; } .autocom-box li:hover{ background: #efefef; } .search-input .icon{ position: absolute; right: 0px; top: 0px; height: 55px; width: 55px; text-align: center; line-height: 55px; font-size: 20px; color: #0d6efd; cursor: pointer; z-index: 2; } |
.trigger { color: black; padding: 12px 8px; font-size: 17px; font-weight: bold; cursor: pointer; width: 340px; height: 350px; border-radius: 25px; border: 2px solid #fdfdfd; box-shadow: 0px 0px 11px 1px rgba(82, 80, 80, 0.78), 0px 0px 4px 1px rgba(27, 25, 25, 0.66); } .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; background-color: white; padding: 6rem; border-radius: 5px; box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3); z-index: 10; } .close-modal { position: absolute; top: 1.2rem; right: 2rem; font-size: 5rem; color: #333; cursor: pointer; border: none; background: none; } .hidden { display: none; } .textcols { white-space: nowrap; } .textcols-item { white-space: normal; width: 33.333%; vertical-align: top; justify-content: center; max-width: 100px; border-width: 5px; } .textcols .textcols-item:first-child { margin-right: 100%; } .name { font-weight: 900; } .main { width: 100%; margin: 0; } ::selection { color: #fff; background: #664AFF } .wrapper { max-width: 1000px; margin: 15px auto; } .wrapper .search-input{ background: #fff; width: 100%; border-radius : 25px; position: relative; box-shadow: Opx 1px 5px 3px rgba(0,0,0,0. 12); } .search-input input { height: 55px; width: 100%; outline: none; border: none; border-radius: 500px; padding: 0 60px 0 20px; font-size: 18px; box-shadoW: 0px 1px 5px rgba(0,0,0,0.1); z-index: 1; position: relative; } .search-input.active input{ border-radius : 5px 5px 0 0; } .search-input .autocom-box{ padding: 0; opacity: 0; pointer-events: none; max-height: 500px; overflow-y: auto; background-color: #ffffff; border-radius : 0 0 5px 5px; position: absolute; width: 100%; } .search-input.active .autocom-box{ padding: 10px 8px; opacity: 1; pointer-events: auto ; } .autocom-box li { list-style: none; padding: 8px 12px; display: none; width: 100%; cursor: default; border-radius: 3px; } .search-input.active .autocom-box li{ display: block; } .autocom-box li:hover{ background: #efefef; } .search-input .icon{ position: absolute; right: 0px; top: 0px; height: 55px; width: 55px; text-align: center; line-height: 55px; font-size: 20px; color: #0d6efd; cursor: pointer; z-index: 2; }
Дополнительно:
У вас ошибка в стилях box-shadoW
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы вывести карточки в три столбца, можно воспользоваться CSS Grid или Bootstrap grid system. Ниже приведены примеры обоих способов.
### Использование CSS Grid:
HTML:
```html
```
CSS:
```css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.card {
background: #f0f0f0;
padding: 10px;
text-align: center;
}
```
### Использование Bootstrap grid system:
HTML:
```html
```
Оба примера позволят вывести карточки в три столбца на странице. Вы можете выбрать подходящий для вас способ в зависимости от ваших предпочтений и требований проекта.