Is there a way to ensure that the images in the day_time_block cover the title class?
I would also like all contents within the
day_time_blockto be displayed usingoverflow-x. However, when I addoverflow-x: auto;to the scroll div, the images in the day_time_block end up being covered by the title div. How can I resolve this issue?
HTML:
<html>
<body>
<div>
<div class="daily_content">
<div class="title">
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="img_title"/>
<div class="daily_title">Title</div>
</div>
<div class="scroll">
<div class="day_time_block">
<div class="day_time_text">Sunday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Monday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Tuesday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Wednesday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
<div class="day_time_block">
<div class="day_time_text">Thursday</div>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" class="daily_img"/>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
<style>
body {
margin: 0px;
}
.title {
background: #ED3632;
height: 25px;
}
.img_title {
width: 30px;
height: 20px;
float: left;
margin-left: 15px;
margin-right: 5px;
}
.daily_title {
color: #f6ff52;
font-size: 1em;
}
.daily_content {
background: #000000;
height: 3000px;
}
.scroll {
color: #ffffff;
font-size: 1em;
width: 480px;
overflow-x: auto;
white-space: nowrap;
background-color: aqua;
border: 1px red solid;
display: flex;
}
.day_time_block {
float: left;
color: #ffffff;
font-size: 1em;
padding-left: 8px;
}
.day_time_text {
font-size: 1em;
display: inline-block;
}
.daily_img {
width: 30px;
height: 20px;
margin-left: 10px;
position: relative;
top: -10px;
}
</style>