我正在尝试循环传递到 Jinja2 模板中的一些数据并填充表。
我想分割每个 <td>将单元格分成更多子列如果有更多信息， <td> 内的子列数是动态的。
示例 1
我想要每个<td>导致类似这样的结果(即无论每个 <td> 有多少个子列，新的子列都将显示在同一行中):
示例 2##
在此示例中，<td> 中的每个新子列显示在前一个的下方(我不想要这个):
如果我获取这段小代码片段并在浏览器中打开它，它就会按照我想要的方式工作(示例 1)。
<html>
<head>
<style type="text/css">
.cell {
display: block;
}
.col {
float:left;
/*display: inline;*/
}
</style>
</head>
<body>
<table style="border:solid">
<thead>
<tr><th>Example 1</th>
<th>Example 2</th>
<th>Example 3</th></tr>
</thead>
<tr>
<td>
<div class="cell">
<div class='col'>
item 1 <br />
item 2 <br />
item 3 <br />
</div>
<div class='col'>
item 1 <br />
item 2 <br />
item 3 <br />
</div>
<div class='col'>
item 1 <br />
item 2 <br />
item 3 <br />
</div>
</div>
</td>
<td>
<div class="cell">
<div class='col'>
item 1 <br />
item 2 <br />
item 3 <br />
</div>
</div>
</td>
<td>
<div class="cell">
<div class='col'>
item 1 <br />
item 2 <br />
item 3 <br />
</div>
<div class='col'>
item 1 <br />
item 2 <br />
item 3 <br />
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
但是它在模板中无法按预期工作。如果我使用相同的样式， <td>不会加宽以容纳新的子列。 <td>确实加宽以容纳每列内的文本。
<table>
<thead>Some information about all the cells</thead>
{% for person in list_of_people%}
<tr>
<td>
<div class="cell">
{% for item in person.activity %}
<div class='col'>
{% for element in item %}
{{ loop.index }}
{% if element['correct'] == True %}
✔
{% else %}
✗
{% endif %}
<br />
{% endfor %}
SCORE <br />= {{stats[0]}} / {{stats[2]}}
<br />
</div> <!-- col -->
{% endfor %}
</div> <!-- attempt -->
</td>
</tr>
{% endfor %}
</table>
如何确保每个 <div>每个里面<td>保持在同一行并且不会被推到前一行下方？
最佳答案
在外部 div.attempt 中使用 display: flex 将阻止内部 div 继续到下一行。
我像这样使用了flexbox(参见this answer):
.attempt {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
关于html - 强制 <div> 保留在 <td> 单元格中的一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20523929/