Question

这是我的页面的JSFiddle（包括源代码）：

源代码：

<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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: