html - 使 DIV 看起来像广播电台/电视节目表？

Question

这是我页面的 JSFiddle(包括源代码):

https://jsfiddle.net/g0kw1Le8/

源代码:

<TITLE>Hallam FM - Best Variety of Hits</TITLE>
<style>
div {
display: table;
border: 4px;
border-color: black;
}

div.guideline {
display: table;
}

div.info {
display: table-row;
}

div.info1 {
display: table-cell;
background-color: ivory;
}

div img {
height: 40px;
display: none;
}

div p {
display: none;
}

.epg-root { position: relative; }
.epg { box-sizing: border-box; margin-bottom: 20px; }
.epg .highlight { background-color: rgb(229, 229, 229); }
.epg .highlight td { border: 1px solid rgb(0, 0, 0); }
.epg .highlight td:first-child { border-left: medium none; }
.epg .highlight td:last-child { border-right: medium none; }

.days { font-family: "Gotham A","Gotham B","helvetica neue",arial,sans-serif; font-size: 1.313em; border-top: 2px solid rgb(0, 0, 0); list-style-type: none; margin-bottom: 0px; }
.days li { text-align: center; height: 100px; line-height: 100px; }
.days li:first-child { border-top: medium none; }
.days .live { position: relative; z-index: 10; background-color: rgb(188, 188, 188); color: rgb(255, 255, 255); border-width: 1px medium 1px 1px; border-style: solid none solid solid; border-color: rgb(0, 0, 0) -moz-use-text-color rgb(0, 0, 0) rgb(0, 0, 0); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; margin-bottom: -1px; margin-left: -1px; }
.epg-left { padding-top: 100px; }
.epg-controls { position: relative; z-index: 10; }
.epg-controls button { height: 100px; width: 10%; font-size: 55px; background-color: rgb(255, 255, 255); cursor: pointer; color: rgb(134, 134, 134); line-height: 1.1; }
.epg-controls button:hover { color: rgb(94, 94, 94); }
.epg-controls .next, .epg-controls .prev { position: absolute; top: 0px; }
.epg-controls .next { right: 0px; box-shadow: -15px 0px 21px -3px rgb(255, 255, 255); }
.epg-controls .prev { left: 0px; }
.epg-table { width: 2200px; table-layout: fixed; border-collapse: collapse; margin: 0px; overflow: hidden; }
.epg-table th, .epg-table td { height: 100px; border-bottom: medium none; }
.epg-table th:first-child, .epg-table td:first-child { border-left: medium none; }
.epg-table th:last-child, .epg-table td:last-child { border-right: medium none; }
.epg-table tr:first-child th { border-top: medium none; }
.epg-table td { cursor: pointer; }
.epg-table .expanded { position: relative; }
.epg-table .expanded .epg-item { position: absolute; z-index: 20; width: 460px; height: auto; padding: 10px; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4); margin-left: -110px; margin-top: -75px; }
.epg-table .expanded .epg-item:hover { background: none repeat scroll 0% 0% rgb(255, 255, 255); color: rgb(52, 52, 52); }
.epg-table .expanded .epg-item .media__img { display: block; }
.epg-table .expanded .epg-item-details { display: block; }
.epg-table .sun .expanded .epg-item { top: auto; bottom: 10px; }
.times { text-align: center; font-size: 1.313em; }
.times th { font-weight: normal; border-bottom: 2px solid rgb(0, 0, 0); width: 4.16667%; }
.times th.active { background-color: rgb(188, 188, 188); color: rgb(255, 255, 255); }
.tues, .thurs, .sat { background-color: rgb(249, 249, 249); }
.schedule-scroll { overflow-x: scroll; border-left: 2px solid rgb(0, 0, 0); position: relative; }
.epg-item { position: relative; height: 100px; }
.epg-item:hover { background: -moz-linear-gradient(center top , rgb(255, 255, 255) 0px, rgb(225, 225, 225) 100%) repeat scroll 0% 0% transparent; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4); }
.live .epg-item { background-color: rgb(188, 188, 188); color: rgb(255, 255, 255); }
.live.expanded .epg-item { background-color: rgb(188, 188, 188); }
.live.expanded .epg-item:hover { background-color: rgb(188, 188, 188); color: rgb(255, 255, 255); }
.live.expanded .epg-item .media__img { border-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255); }
.epg-item .epg-status { text-transform: uppercase; font-size: 0.8em; margin: 0px; position: absolute; right: 8px; bottom: 8px; }
.epg-item .epg-status::before { position: absolute; content: ""; left: -17px; top: 2px; width: 0px; height: 0px; border-style: solid; border-width: 6.5px 0px 6.5px 11px; border-color: transparent transparent transparent rgb(255, 255, 255); }
.epg-item .media__img { display: none; height: 120px; width: 120px; margin-right: 10px; }

.epg-item .media__img:hover { display: block; height: 120px; width: 120px; margin-right: 10px; }
.highlight .epg-item:hover { color: rgb(255, 255, 255); background: -moz-linear-gradient(center top , rgb(140, 140, 140) 0px, rgb(188, 188, 188) 100%) repeat scroll 0% 0% transparent; }
.epg-item-details { display: none; }
.epg-item-details:hover { display: block; }
.epg-item-details p { margin-bottom: 0.8em; font-size: 0.875em; }
.epg-item-details .btn { font-size: 1.313em; }
.epg-container li.hovered .epg-item-title, .epg-container li.hovered .epg-item-time { color: rgb(255, 255, 255); }
.epg-item-title { margin: 0px; padding: 0.4em; overflow: hidden; text-overflow: ellipsis; font-size: 1.025em; max-height: 3.25em; }
.expanded .epg-item-title { padding: 0px 0px 0.4em; font-size: 1.625em; }
.epg-now { width: 1px; top: 102px; bottom: 0px; position: absolute; background-color: rgb(255, 0, 0); }
.epg-now::before { content: ""; position: absolute; display: block; left: -11px; top: 0px; width: 0px; height: 0px; border-style: solid; border-width: 11px 11px 0px; border-color: rgb(255, 0, 0) transparent transparent; }
.widget-epg-mobile { position: relative; margin: 0px -20px; }
</style>
<div class="epg-table">
<div height="300" class="info1">00:00</div>
<div height="300" class="info1">01:00</div>
<div height="300" class="info1">02:00</div>
<div height="300" class="info1">03:00</div>
<div height="300" class="info1">04:00</div>
<div height="300" class="info1">05:00</div>
<div height="300" class="info1">06:00</div>
<div height="300" class="info1">07:00</div>
<div height="300" class="info1">08:00</div>
<div height="300" class="info1">09:00</div>
<div height="300" class="info1">10:00</div>
<div height="300" class="info1">11:00</div>
<div height="300" class="info1">12:00</div>
<div height="300" class="info1">13:00</div>
<div height="300" class="info1">14:00</div>
<div height="300" class="info1">15:00</div>
<div height="300" class="info1">16:00</div>
<div height="300" class="info1">17:00</div>
<div height="300" class="info1">18:00</div>
<div height="300" class="info1">19:00</div>
<div height="300" class="info1">20:00</div>
<div height="300" class="info1">21:00</div>
<div height="300" class="info1">22:00</div>
<div height="300" class="info1">23:00</div>
</div>
<div style="width:60px;" class="info1"></div>
<div class="info1">John Doe
<p><img src="logo.jpg">John Doe on the late show!</p></div>
<div style="width:300px;"class="info1"></div>
<div class="info1">Richard Roe
<p><img src="logo.jpg">More OF THE BEST VARIETY of hits!</p></div>
<div style="width:240px;" class="info1"></div>
<div class="info1">Hallam FM Breakfast
<p><img src="logo.jpg">hALLAM fm IN THE MORNING!</p></div>
<div style="width:300px;"class="info1"></div>
<div class="info1">Weekday Daytimes
<p><img src="logo.jpg">John Doe!!</p></div>
<div style="width:240px;"class="info1"></div>
<div class="info1">Jon Smith
<p><img src="logo.jpg">John Doe!!</p></div>
<div style="width:180px;"class="info1"></div>
<div class="info1">Evening Show
<p><img src="logo.jpg">John Doe!!</p></div>
<div style="width:120px;"class="info1"></div>
<div class="info1">Late Night hallam fm

我想做的是两件事:

• 在显示演示者照片和信息的地方有一个悬停效果，就像在这个页面上一样 https://web.archive.org/web/20150104182605/http://www.hallamfm.co.uk:80/on-air/station-schedule/ (但我的设计是垂直的，不像 web.archive 链接是水平的)或者这个:https://www.mix96.co.uk/schedule/ (注意悬停效果)

• 使显示的宽度适合，例如4 小时的节目宽度为 240(240 分钟 = 4 小时)。当 JSFiddle 运行时，它显示它们全部打包，并且不适合 div 顶部的时间。

我一直在尝试，但无法成功复制上面 Internet Archive 链接中看到的设计。

如有任何建议，我将不胜感激。

Answer 1

您的布局可能可以通过 <table> 实现但您可能会发现 CSS 网格使用起来更灵活(也更有趣)。

您可以创建 24 个网格列并使用不同的类分配时隙。

确保附加信息有position: absolute关于它的元素。悬停时，更改 display类型。

fiddle

body {
  margin: 0;
  padding: 1rem;
  background: black;
  color: lightgrey;
  font-family: sans-serif;
  font-weight: 300;
  line-height: 1.35;
}

img {
  display: none;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(24, 60px);
  grid-gap: .5rem;
}

.mins-60 {
  grid-column: span 1;
}

.mins-120 {
  grid-column: span 2;
}

.mins-180 {
  grid-column: span 3;
}

.mins-240 {
  grid-column: span 4;
}

.mins-300 {
  grid-column: span 5;
}

div[class^="mins"] {
  position: relative;
  border-top: .333rem solid white;
  padding-top: .333rem;
  cursor: default;
}

p {
  display: none;
  position: absolute;
  top: 1rem;
  border: .1rem solid white;
  border-top-width: .3333rem;
  background: black;
  padding: 1rem;
  width: 15rem;
}

div[class^="mins"]:hover p {
  display: block;
}

<div class="wrapper">
  <div>00:00</div>
  <div>01:00</div>
  <div>02:00</div>
  <div>03:00</div>
  <div>04:00</div>
  <div>05:00</div>
  <div>06:00</div>
  <div>07:00</div>
  <div>08:00</div>
  <div>09:00</div>
  <div>10:00</div>
  <div>11:00</div>
  <div>12:00</div>
  <div>13:00</div>
  <div>14:00</div>
  <div>15:00</div>
  <div>16:00</div>
  <div>17:00</div>
  <div>18:00</div>
  <div>19:00</div>
  <div>20:00</div>
  <div>21:00</div>
  <div>22:00</div>
  <div>23:00</div>
  <div class="mins-60">John Doe
    <p><img src="logo.jpg">John Doe on the late show !</p>
  </div>
  <div class="mins-300">Richard Roe
    <p><img src="logo.jpg">More OF THE BEST VARIETY of hits !</p>
  </div>
  <div class="mins-240">Hallam Fm Breakfast
    <p><img src="logo.jpg">hALLAM fm IN THE MORNING !</p>
  </div>
  <div class="mins-300">Weekday Daytimes
    <p><img src="logo.jpg">John Doe ! !</p>
  </div>
  <div class="mins-240">Jon Smith
    <p><img src="logo.jpg">John Doe ! !</p>
  </div>
  <div class="mins-180">Evening Show
    <p><img src="logo.jpg">John Doe ! !</p>
  </div>
  <div class="mins-120">Late Night
    <p><img src="logo.jpg">John Doe ! !</p>
  </div>
</div>