如何在HTML/CSS中使一行中的所有日期都具有相同的高度？

z9smfwbn  于 2023-04-08  发布在  其他
关注(0)|答案(2)|浏览(133)

我有一行不同长度的日期，我想让它们都有相同的高度，这样这行看起来就统一了。
具体来说，我在日期28的“TUE”行中有一个文本，它比该行中的其他日期长，如“27，19，30，31，1，2”。我希望所有日期在该行中的高度相同，以便只有一个日期不长于其他日期。
在我的代码中，我使用了以下类：
class=“day”-包含给定的日期，例如“MON”及其所有向下倾斜的牌，如“27，3，10，17，24”class=“card”-包含日期
下面是我在JSFiddle上的代码的链接：https://jsfiddle.net/nLrpo5k3/25/
到目前为止，我已经尝试向“card”类添加一些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%;
    }
}

这里我添加了组成这个html代码的React代码，如果只能通过css完成的话

<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 result on image

css

2条答案

按热度按时间
cwtwac6a

cwtwac6a1#

如果希望所有行的高度相同，请使用CSS display:grid;模式

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

.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/

赞(0）分享  回复(0）举报  2023-04-08
mkh04yzy

mkh04yzy2#

如果希望每一行的高度不同，可以使用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>
赞(0）分享  回复(0）举报  2023-04-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com