Создание столбцов из пролетов
Я получаю {patients} и помещаю его в div:
<div className = "patients">
{patients}
</div>
Он содержит Имя и Фамилия, каждая строка в двух диапазонах:
(Инструменты разработки)
(Текущее состояние)Как стилизовать эти интервалы в столбцах (подобных таблице)?
(ожидаемый результат)---РЕДАКТИРОВАТЬ---
Содержание {patients} меняется. Это результат поиска, поэтому приходят разные имена, иногда больше, иногда меньше. Я не могу применить стиль к ним отдельно.
См. код.
Ответы 3
Вы можете использовать display с table/table-row/table-cell или использовать display block с исправлением или сделать каждую строку flexbox с фиксированной шириной или какое-то другое решение. Есть много способов добиться этого.
Интересно, но мне нужно одно полное решение :) Добавлен атрибут display: table-row; в класс patients, и само по себе это ничего не меняет.
<div class = "patients">
<div class = "patient">
<span>Eric</span>
<span>Car</span>
<span>Car</span>
</div>
<div class = "patient">
<span>Eric</span>
<span>Car</span>
<span>Car</span>
</div>
<div class = "patient">
<span>Eric</span>
<span>Car</span>
<span>Car</span>
</div>
<div class = "patient">
<span>Eric</span>
<span>Car</span>
<span>Car</span>
</div>
</div>
CSS
----
.patients {
border: 1px solid black;
display: table;
width: 100%;
border-bottom: none;
}
.patient {
display: table-row;
}
.patient > span {
display: table-cell;
border-bottom: 1px solid black;
}
пожалуйста, дайте мне знать, работает ли приведенный выше фрагмент кода нормально для вас?
Спасибо, к сожалению, я получаю {patients}, который имеет динамический контент, это могут быть разные имена, иногда больше, иногда меньше.
вы можете написать пациентам.карта (пациент => вернуться ())
В операторе return вы можете вернуть вышеуказанную разметку
Где написать patients.map(patient => return ())? Может быть, если бы вы могли обновить ответ, я бы увидел все это там.
Используете ли вы какой-либо libray, такой как react js, или вы пытаетесь сделать это в простом javascript?
Реагируйте, это было то, что у меня было раньше: render () { let patients = this.props.patients.map((p) => { return <PatientListItem key = {p.globalId} patient = {p} selected = {p.globalId === this.props.selected} onClick = {(e) => this.props.selectPatient(p)}/> }); return (
Так что у меня есть (p) вместо patient, которое вы предлагаете. Я попробую это.
<div className = "patients"> this.props.patients.map(patient => { return ( <div className = "patient" key = {patient.globalId}> <span>{patient.name}</span> < span>{patient.surName}</span> </div> }) </div>
В конце концов, вместо того, чтобы создавать patient в коде React, я выбрал его с помощью .patients > * { . Спасибо за вашу приверженность!
Извините, пропустил это :)
Flexbox идеально подходит для такого макета. Создайте макет flexbox в каждой строке, указав обертку .patientdisplay: flex;:
.patient {
display: flex;
justify-content: space-between;
}
Правило justify-content: space-between помещает промежутки на левый и правый края доступного пространства, одна из моих любимых вещей, которые может делать flexbox.
.patients {
border: 1px solid black;
max-width: 250px;
}
.patient {
display: flex;
justify-content: space-between;
border-top: 1px solid black;
}
.patient span {
padding: 0 20px; // gives a little space around each span
}
.patient:first-child {
border-top: none;
}<div class = "patients">
<div class = "patient">
<span>Eri</span>
<span>Car</span>
</div>
<div class = "patient">
<span>Dude</span>
<span>Ok</span>
</div>
<div class = "patient">
<span>Nice</span>
<span>One</span>
</div>
</div>
что ты пробовал? дисплей, поплавок даже положение может сделать это.