我正在制作一个 node express 网站,对于新闻页面,我正在使用来自新闻 api ( https://newsapi.org/ ) 的数据数据确实出现在页面上,但它不会相应地响应 CSS flexbox。我的意图是,每个 news-row
看起来像一个包含图像、标题和简要内容的框,框应该像这样:
盒子盒子盒子盒子
盒子盒子盒子盒子
盒子盒子盒子盒子
使用 Scss 下面的框显示如下:
盒子
盒子
盒子
盒子
盒子
//scss file
.news-container {
background-color: $light-background;
.news-tb {
width: 350px;
display: flex;
.news-row {
display: flex;
flex-direction: column;
}
}
}
//ejs file
<div class="news-container">
<table class="news-tb">
<% for(var i = 0; i < data.articles.length; i++) { %>
<tr class="news-row">
<td class="news-img"><img src="<%= data.articles[i].urlToImage %>"/></td>
<td class="news-title"><%= data.articles[i].title %></td>
<td class="news-content"><%= data.articles[i].content %></td>
</tr>
<% } %>
</table>
</div>
最佳答案
您使用 flexbox 解决这个问题的尝试很好。 flexbox 的一个难题是它很难与 table
一起使用,因为它们是显示事物的不同方式。另见 this Stack Overflow question .
使用 表
解决方案
仅使用 table
来实现您想要的解决方法是专门将所有元素设置为 display: flex;
并使用它。这是一个 CodePen example to do that .
$light-background: #eee;
.news-tb {
background-color: $light-background;
display: flex;
flex-flow: row wrap;
width: 100%;
tbody,
tr,
td {
display: flex;
}
tbody {
flex-direction: row;
flex-wrap: wrap;
}
.news-row {
flex: 1 1 25%;
}
}
使用div方案
有一个解决方案使用 div 而不是 table
。这是 CodePen example为了那个原因。它比以前的解决方案短得多,但它仍然显示有效的 HTML 和 CSS。
.news-tb {
background-color: $light-background;
display: flex;
flex-flow: row wrap;
width: 100%;
.news-row {
flex: 1 1 25%;
}
}
只需要使“行”占宽度的 25%。
关于css - 使用 CSS flexbox 网格填充 API 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52457712/