我正在使用
<table>
<tbody><tr class="header">
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr class="header">
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="info">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="3" class="event">Event details</td>
</tr>....
到
....</table>
来自硬编码的日历。在移动设备上，7列并不能很好地工作。我更喜欢一天的线条格式。
实现这一目标的最简单或最优雅的方法是什么？我可以使用搜索和替换重新编码原始表格，因此我有一个7列div的网格，但这可能有点“滑”。 （将</tr>替换为<br/>？）
答案 0 :(得分：0)
请查看this解决方案。
HTML：
<div class="calendar">
<ul class="weekdays">
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
</ul>
<ul class="days">
<!-- add filler at beginning of month -->
<li class="out_of_range calendar-day">
<div class="date day_cell"></div>
</li>
<li class="out_of_range calendar-day">
<div class="date day_cell"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 1</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 2</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 3</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Wed,</span> <span class="month">Mar</span> 4</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Thu,</span> <span class="month">Mar</span> 5</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Fri,</span> <span class="month">Mar</span> 6</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sat,</span> <span class="month">Mar</span> 7</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 8</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 9</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 10</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Wed,</span> <span class="month">Mar</span> 11</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Thu,</span> <span class="month">Mar</span> 12</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Fri,</span> <span class="month">Mar</span> 13</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sat,</span> <span class="month">Mar</span> 14</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 15</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 16</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 17</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Wed,</span> <span class="month">Mar</span> 18</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Thu,</span> <span class="month">Mar</span> 19</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Fri,</span> <span class="month">Mar</span> 20</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sat,</span> <span class="month">Mar</span> 21</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 22</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 23</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 24</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Wed,</span> <span class="month">Mar</span> 25</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Thu,</span> <span class="month">Mar</span> 26</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Fri,</span> <span class="month">Mar</span> 27</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sat,</span> <span class="month">Mar</span> 28</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 29</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 30</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 31</div>
<div class="show-info"></div>
</li>
<!-- add filler at end of month -->
<li class="out_of_range calendar-day">
<div class="date day_cell"></div>
</li>
<li class="out_of_range calendar-day">
<div class="date day_cell"></div>
</li>
</ul>
<ul class="footer-weekdays">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<p>More info at <a href="http://www.bluekeyinteractive.com/how-to-create-a-responsive-calendar/" target="_blank">http://www.bluekeyinteractive.com/how-to-create-a-responsive-calendar/</a>
SCSS：
@import "compass/css3";
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@mixin breakpoint($point) {
@if $point == medium {
@media (min-width: 1000px) { @content; }
}
@else if $point == small {
@media (min-width: 628px) { @content; }
}
}
div.calendar{
width:100%;
padding:20px 0;
overflow:hidden;
clear:both;
.weekdays,
.footer-weekdays{
display: none;
}
ul {
margin: 0;
padding:0;
list-style-image: none;
}
li{
height: auto;
width: 100%;
padding: 10px;
max-height: 80px;
border:2px solid #fff;
background-color:#c3eaf6;
.day,
.month{
display: inline;
}
.day {
display: inline;
@include breakpoint(small) {
display: none;
}
}
&.out_of_range {
display: none;
}
}
@include breakpoint(small) {
.weekdays,
.footer-weekdays{
display: block;
li {
background-color:#21b0dc;
height: 40px;
text-align: center;
color:#fff;
}
}
.footer-weekdays li{height:20px;}
ul{
list-style: none;
padding: 0;
margin: 0;
clear: both;
width: 100%;
li{
display: block;
float: left;
height: auto;
max-height: 150px;
width: 14.2857142857%;
padding: 10px;
&.out_of_range {
display: block;
}
}
}
}
}
JS：
/**
Equal Heights Plugin
Equalize the heights of elements. Great for columns or any elements
that need to be the same size (floats, etc).
Version 1.01
Updated 1/30/2014
Copyright (c) 2008 Rob Glazebrook (cssnewbie.com)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
Usage: $(object).equalHeights([minHeight], [maxHeight]);
Example 1: $(".cols").equalHeights(); Sets all columns to the same height.
Example 2: $(".cols").equalHeights(400); Sets all cols to at least 400px tall.
Example 3: $(".cols").equalHeights(100,300); Cols are at least 100 but no more
than 300 pixels tall. Elements with too much content will gain a scrollbar.
**/
(function($) {
$.fn.equalHeights = function(minHeight, maxHeight) {
tallest = (minHeight) ? minHeight : 0;
this.each(function() {
if($(this).height() > tallest) {
tallest = $(this).height();
}
});
if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
return this.each(function() {
$(this).height(tallest).css("overflow","auto");
});
}
})(jQuery);
$(".days li").equalHeights(100,150);