小贝子编程

如何使所有日期在一行相同的高度在HTML/CSS?



我有一行不同长度的日期，我想把它们都设置为相同的高度，这样一行看起来就统一了。

具体来说，我在"TUE"行有一个文本。在日期28中，它比"27、19、30、31、1、2"等行中的其他日期长。我希望所有的日期在一行中都是相同的高度，这样只有一个日期不会比其他日期长。

在我的代码中，我使用了以下类:

类="day"-包含给定的日期，例如"星期一"所有的牌都在下坡上，比如27,3,10,17,24;类="card"-包含日期

这里是我在JSFiddle上的代码链接:https://jsfiddle.net/nLrpo5k3/25/

到目前为止，我已经尝试了添加一些CSS属性到卡片上。类，如height, line-height和vertical align，但它们似乎不像预期的那样工作。

我所期望的是，所有的日期将具有相同的高度，并在一行中正确对齐。然而，实际结果是一些日期仍然比其他日期长，并且对齐方式不一致。

我也试过添加一些JavaScript代码来动态调整日期的高度，但它似乎也不起作用。

HTML:

<div class="content">
<div class="day">
<h3 class="day-title">Mon</h3>
<div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 0.6;">27</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">3</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">10</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">17</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">24</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
</div>
</div>
<div class="day">
<h3 class="day-title">Tue</h3>
<div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 0.6;">28</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout">ddd<br/>ddd<br/>ddd<br/>ddd<br/>ddd<br/>ddd<br/>ddd<br/>ddd<br/>dddddd<br/>this is longer></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">4</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">11</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">18</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">25</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
</div>
</div>
<div class="day">
<h3 class="day-title">Wed</h3>
<div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 0.6;">29</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="left"><i class="fa-light fa-trash"></i></div>
<div class="right ml-auto pos-rel"><span class="day-title-active"></span><span
style="opacity: 1;">5</span></div>
</div>
<div class="workout">
<h6 class="mt-0 mb-0">Rest day</h6>
</div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">12</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">19</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">26</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
</div>
</div>
<div class="day">
<h3 class="day-title">Thu</h3>
<div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 0.6;">30</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">6</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">13</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">20</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">27</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
</div>
</div>
<div class="day">
<h3 class="day-title">Fri</h3>
<div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 0.6;">31</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">7</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">14</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">21</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">28</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
</div>
</div>
<div class="day">
<h3 class="day-title">Sat</h3>
<div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">1</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">8</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">15</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">22</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">29</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
</div>
</div>
<div class="day">
<h3 class="day-title">Sun</h3>
<div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">2</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">9</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">16</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">23</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
<div class="card pos-rel">
<div class="day-date">
<div class="right ml-auto pos-rel"><span style="opacity: 1;">30</span></div>
</div>
<div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
class="fa-light fa-paste"></i></div>
<div class="workout"></div>
</div>
</div>
</div>
</div>

CSS

.header {
display: flex;
flex-direction: column;
}
.header h2 {
font-family: 'Futura PT', sans-serif;
font-weight: 500;
margin-bottom: .25rem;
text-align: right;
}
.content {
width: 100%;
display: inline-flex;
}
.content .day {
width: 14.3%;
}
.content .day-title {
background-color: red;
padding: .15rem;
text-align: center;
font-size: 1.2rem;
font-family: 'Futura PT', sans-serif;
font-weight: 500;
border: 1px solid var(--white);
border-radius: .2rem;
text-transform: uppercase;
z-index: 2;
}
.content .card {
padding: .5rem;
border: 1px solid black;
min-height: 10rem;
border-radius: .2rem;
}
.day-date {
display: inline-flex;
justify-content: space-between;
align-items: center;
width: 100%;
z-index: 1;
margin-bottom: .25rem;
background-color: var(--white-light);
}
@media(max-width: 768px) {
.content {
flex-direction: column;
}
.content .day {
width: 100%;
}
}

如果不能通过css

完成，我在这里添加React代码来组成这个html代码。
<div className="content">
{daysOfWeek.map((day, index) => (
<div className={day === new Date(actionMenu.date).toLocaleString('en-US', { weekday: 'short' }) ? 'day day-selected' : 'day'} key={index}>
<h3 className='day-title'>{day}</h3>
<div>
{daysArray.map(dmap => {
let filteredWorkoutList = workoutList.filter(e => Date.parse(e.date) === Date.parse(dmap))
let textDate = new Date(dmap).toISOString().slice(0, 10)
if (daysOfWeek[((new Date(dmap)).getDay() + 6) % 7] === day)
return <div className="card pos-rel">
<div className="day-date">
{filteredWorkoutList.length !== 0 && (<div className="left">
{filteredWorkoutList[0]?.complete !== "rest" ? <i className="fa-light fa-arrows-up-down-left-right"></i> : ""}
{filteredWorkoutList[0]?.complete !== "rest" ? <i className="fa-light fa-clipboard"></i> : ""}
<i className="fa-light fa-trash" onClick={() => setdeleteMenu({ status: true, date: textDate })}></i>
</div>)}
<div className="right ml-auto pos-rel">{Date.parse(textDate) === Date.parse(new Date().toISOString().slice(0, 10)) ? <span className="day-title-active"></span> : ""}<span style={{ opacity: new Date(dmap).getMonth() === currentMonth ? 1 : 0.6 }}>{new Date(dmap).getDate()}</span></div>
</div>
{filteredWorkoutList.length === 0 && Date.parse(actionMenu.date) !== Date.parse(dmap) && (<div className="creation-menu">
<i className="fa-light fa-plus" onClick={() => setActionMenu({ type: "create", date: dmap, workoutTitle: "", workoutExercises: [{ name: "", instructions: "" }] })}></i>
<i className="fa-light fa-battery-low" onClick={(e) => restDayWorkoutEvent(e, dmap)}></i>
<i className="fa-light fa-paste"></i>
</div>)}
{actionMenu.type !== null && Date.parse(actionMenu.date) === Date.parse(dmap) && (
<div className='action-menu'>
<label>Workout name</label>
<input type="text" placeholder="Enter workout name" value={actionMenu.workoutTitle} onChange={changeWorkoutDataEvent} />
{actionMenu.workoutExercises.map((weitem, wekey) => {
return (
<div className="exercise-card">
<input type="text" placeholder="Exercise name" value={weitem.name} name="name" onChange={(e) => changeExerciseDataEvent(e, wekey)} />
<textarea placeholder="Exercise instructions" className='mt-025' value={weitem.instructions} name="instructions" onChange={(e) => changeExerciseDataEvent(e, wekey)} />
{wekey === actionMenu.workoutExercises.length - 1 ? <button type="button" className="btn btn-default btn-add-exercise" onClick={addExerciseData}><i className="fa-thin fa-hexagon-plus"></i> Exercise</button> : ""}
</div>
)
})}
<div className='ds-inline-flex-align-center mt-1 wd-100'>
<button type="button" className="btn mr-025 ml-auto cancel" onClick={() => setActionMenu({ type: null, date: "" })}>Cancel</button>
<button type="button" className="btn btn-default" disabled={actionMenu.workoutTitle.trim() === ""}>Save</button>
</div>
</div>
)}
<div className={filteredWorkoutList.length === 0 ? "workout" : "workout hover"} onClick={() => { if (filteredWorkoutList.length !== 0) { setActionMenu({ type: "edit", date: dmap, workoutTitle: "", workoutExercises: [] }); } }}>
{filteredWorkoutList.map(witem => {
return <h6 className='mt-0 mb-0'>{witem.title}</h6>
})}
</div>
</div>
})}
</div>
</div>
))}
</div>

html结果

如果你想让所有的行相同的高度，使用CSSdisplay:grid;mode

这样，所有的行将自动调整到相同的高度，根据需要在整个网格中最高的框。

.container {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 1em;
grid-row-gap: 1em;
}
.cell {
background: palegoldenrod;
}
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell">
All cells become as tall as me. Edit me and re-run, if you don't believe it!
</div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div
</div>

这个惊人的CSS特性只有几年的历史，在这里解释得很清楚:

https://css-tricks.com/snippets/css/complete-guide-grid/

如果您希望每一行都是不同的高度，则使用display:flex;

.container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.cell {
display: table-cell;
background: palegoldenrod;
width: 14.28%;
margin-bottom: 0.5em;
min-height: 0.5em;
}
<div class="container">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell">c</div>
<div class="cell"></div>
<div class="cell">
All cells in my row become as tall as me.
</div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell">But</div>
<div class="cell">other</div>
<div class="cell">rows</div>
<div class="cell">have</div>
<div class="cell">own size</div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div </div>

我以单文件的方式完成了它，因为它是按顺序排序的，所以这就是它的工作方式。

<div className='days-content'>
{daysOfWeek.map((day, index) => {
return <div className='day-title' key={index}>
<h3>{day}</h3>
</div>
})}
</div>
<div className='days-card-content'>
{daysArray.map(dmap => {
return <div className='card'>{dmap}</div>
})}
</div>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium