我想显示一个图像网格,它将自动缩放以适应可用的宽度.每行的图像数量是任意的,并且可用宽度可以随着用户重新调整窗口大小而变化.原始图像也可以具有不同的宽度,但是每个都需要以相同的宽度显示.我宁愿避免使用表格,只需要一个仅限CSS的解决方案.我设想的HTML是这样的:
<div class='img-grid'> <!-- one per page, typically fixed 70% of page width -->
<!-- can be an arbitrary number of rows per grid -->
<div class='row'> <!-- width would be 100% of img-grid width -->
<!-- can be an arbitrary number of images per row -->
<div class='img-wrapper'> <!-- wrapper needs to force images to same width -->
<img class='image' src="test1.jpg"/>
</div>
</div>
</div>
看起来很简单但我对4个类中每个类使用的css感到困惑,以强制图像达到相同的宽度,缩放该宽度以使(任意数量)图像适合行而不包装并确保随着浏览器窗口宽度的变化,一切都会重新缩放.
谢谢奈杰尔
我有一个 astropy.table.table 对象保存星星数据。每颗恒星一行，列包含恒星名称、最大星等数据。
我理解天文表的内部表示是每列的字典，行作为字典对象的切片即时返回。
我需要将 astropy 表转换为 dict 对象的 Python 列表，每个星一个 dict。本质上，这既是表格的转置，也是转换。
显然，我可以按行内的列迭代表，以构建字典并将它们添加到列表中，但我希望有一种更有效的方法？
我的页面使用CSS媒体查询来显示移动设备的可折叠垂直菜单和大型设备的标准水平菜单.
对于移动设备,崩溃由Click功能触发,该功能可切换菜单周围的包装.
这通常工作正常,但如果用户在切换菜单后调整浏览器窗口大小,则媒体查询似乎无法正常工作(至少不适用于flexbox元素).
这是JQuery的限制,是否有解决方法？
小提琴在这里http://jsfiddle.net/nakbrooks/nyrzp4ps/1/
整页(包括JScript和CSS在这里:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Load jquery library -->
</head>
<body>
<script>
/* Toggle the menus (for small screen devices) */
$(document).ready(function(){
$("#toggle-menu").click(function(){
$("#hdr-menu-wrapper").toggle();
});
});
</script>
<style> /* Obviously styles would normally be in a separate style sheet */
/* Default Layout - all resolutions */
* {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p { /* Just to make explanation of problem …