Smalltalk Seaside 三人一组展示，不使用桌子
[英]Smalltalk Seaside display in threes without using tables
问题描述
I have built a web site for my local plastic model club which involves showing multiple images on a page.
我为我当地的塑料模型俱乐部建立了一个网站，其中涉及在一个页面上显示多个图像。 I like to show them 3 abreast.我喜欢让他们三个并排。 Up to now, I have done this using a nested series of table codes which gets very messy.到目前为止，我已经使用一系列嵌套的表格代码完成了这项工作，这些代码变得非常混乱。
Is there a simpler way.有没有更简单的方法。 Let us say that I have 12 images and I want to show them three across and 4 rows down.假设我有 12 张图像，我想将它们展示为 3 横 4 行。 I can do this using html table, html table row, etc. but it gets very complicated with lots of if statements, etc.我可以使用 html 表格、html 表格行等来做到这一点，但是如果有很多 if 语句等，它会变得非常复杂。
As I have had problems maintaining the web site from day to day, I have taken down the seaside version but you can see an example of the type of display on the current home page at http://www.ipms-clacton.org.uk under "A selection of member's models"由于我每天都在维护网站时遇到问题，所以我删除了海边版本，但您可以在http://www.ipms-clacton.org 的当前主页上看到显示类型的示例。英国“会员模特精选”下
David大卫
3 个解决方案
解决方案1
1 2022-03-13 02:38:15
If you want to make the table programmatically you could use the following code as a new message in your class.如果您想以编程方式制作表格，您可以在课堂上使用以下代码作为新消息。 If you pass it the html and an orderedCollection it makes a new table 3 items wide and as many rows as it takes.如果你将html和一个orderedCollection传递给它，它会创建一个新表 3 项目宽和尽可能多的行。 The final row can be less than three elements.最后一行可以少于三个元素。 You will need to change it to display images rather than text but it's a place to start.您需要将其更改为显示图像而不是文本，但这是一个开始的地方。 The removeFirst: command removes a number of items from an ordered collection and returns those items as a new collection. removeFirst:命令从有序集合中移除一些项目并将这些项目作为新集合返回。 That lets you break the collection apart into elements for your individual rows.这使您可以将集合拆分为各个行的元素。 Here is the message's definition:这是消息的定义：
make3Table: html using: anOrdCollection
html table: [
[ anOrdCollection size >= 3 ] whileTrue: [ html tableRow: [
(anOrdCollection removeFirst: 3) do: [ :item | html tableData: item ]
].
].
anOrdCollection isNotEmpty ifTrue: [
html tableRow: [
anOrdCollection do: [ :item | html tableData: item ]
]
].
]
解决方案2
0 2022-03-07 11:46:42
The question isn't Seaside specific, but HTML/CSS related.这个问题不是 Seaside 特定的，而是与 HTML/CSS 相关的。
The solution for that is to use any element inside a container, and use CSS-grid layout for that container.解决方案是使用容器内的任何元素，并为该容器使用 CSS 网格布局。
Eg例如
.gallery-container { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 20px; padding: 20px; } .image-container { display: flex; background-color: navy; color: white; align-items: center; justify-content: center; height: 150px; } @media (min-width: 600px) { .gallery-container { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .gallery-container { grid-template-columns: repeat(4, 1fr); } }
<html> <body> <div class="gallery-container"> <div class="image-container"></div> <div class="image-container">2</div> <div class="image-container">3</div> <div class="image-container">4</div> <div class="image-container">5</div> <div class="image-container">6</div> <div class="image-container">7</div> <div class="image-container">8</div> <div class="image-container">9</div> <div class="image-container">10</div> </div> </html>
It will work for any number of elements, and it has two CSS width breakpoints to show 1, 2 or 4 elements per row.它适用于任意数量的元素，它有两个 CSS 宽度断点，每行显示 1、2 或 4 个元素。
Then the Seaside part is only about generating that container and the elements using the canvas tags.然后 Seaside 部分只是关于使用画布标签生成该容器和元素。
解决方案3
0 2022-05-27 14:21:52
If you don't want to use a table another couple simpler ways to do it with css + seaside is with CSS columns:如果您不想使用表格，那么使用 css + seaside 的另一种更简单的方法是使用 CSS 列：
html div
style:'columns:3';
with:[ myCollection do:[:ea | html div:ea]]
There are several css styling rules for columns .列有几个 CSS 样式规则。
Or using CSS flexbox或者使用CSS flexbox
html div
style:'display:flex; flex-direction:row; flex-wrap:wrap; justify-content: space-between';
with:[
myCollection do:[:ea | html div
style:'width:32%';
with: ea]
]
Those style: rules could/should be in your CSS file as a CSS class这些style:规则可以/应该作为 CSS 类在您的 CSS 文件中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.