Question

我想创建一个表格布局，在每一行中，两个相邻单元格应具有相同的高度。我认为display:table;和display:table-cell应该自动处理此布局，但结果似乎类似于两栏布局和 mansory effetc ，单元格有自己的高度。

我尝试删除float:right，但它会将所有单元格合并为一行。

.newsTable {
  display: table;
}

.lastAnchor {
  display:table-cell;
  float: right;
  font-size: 9pt;
  width: calc(50% - 10px);
  margin: 5px;
  vertical-align: top;
  padding: 5px;
  border-top: 1px dotted #aaaaaa;
  padding-top: 10px;
  box-sizing:border-box
}

<div class="inner newsTable">
	
	<a class="lastAnchor">
    Lorem ipsum dolor sit amet, ea aperiam convenire eam, quodsi tritani ex qui. Et cum case doctus argumentum, semper feugiat rationibus eum ei. Cu hinc fugit accommodare per, ex exerci volutpat repudiare eum, tale novum percipitur ius cu. An mea nemore convenire, te quo indoctum hendrerit. Vocent nostrud platonem ei sit, vim ut mucius minimum, ea sed qualisque vulputate. Epicurei persequeris mediocritatem id sit, cum labitur conceptam ut. In utamur appellantur ius, ex integre electram vix, no per ponderum suscipiantur.
	</a>
  
  	<a class="lastAnchor">
    Lorem ipsum dolor sit amet, ea aperiam convenire eam, quodsi tritani ex qui. Et cum case doctus argumentum, semper feugiat rationibus eum ei. 
	</a>
  
  	<a class="lastAnchor">
    Lorem ipsum dolor sit amet, ea aperiam convenire eam, quodsi tritani ex qui. Et cum case doctus argumentum, semper feugiat rationibus eum ei. Cu hinc fugit accommodare per, ex exerci volutpat repudiare eum, tale novum percipitur ius cu. An mea nemore convenire, te quo indoctum hendrerit. Vocent nostrud platonem ei sit, vim ut mucius minimum, ea sed qualisque vulputate. Epicurei persequeris mediocritatem id sit, cum labitur conceptam ut. In utamur appellantur ius, ex integre electram vix, no per ponderum suscipiantur.
	</a>
  
  
  	<a class="lastAnchor">
    Lorem ipsum dolor sit amet, ea aperiam convenire eam, quodsi tritani ex qui. Et cum case doctus argumentum, semper feugiat rationibus eum ei. Cu hinc fugit accommodare per, ex exerci volutpat repudiare eum, tale novum percipitur ius cu. An mea nemore convenire, te quo indoctum hendrerit. Vocent nostrud platonem ei sit, vim ut mucius minimum, ea sed qualisque vulputate. Epicurei persequeris mediocritatem id sit, cum labitur conceptam ut. In utamur appellantur ius, ex integre electram vix, no per ponderum suscipiantur.
	</a>
	
</div>

Answer 1

只需删除txt = raw_input("") newtxt = txt.split(" ")选项，该选项将元素从文档的正常流程中移除，并添加另一个包装器元素以充当float

table-row

.newsTable {
	display: table;
}

.lastAnchor {
    display:table-cell;
	/* Remove this float: right; */
	font-size: 9pt;
	width: calc(50% - 10px);
	margin: 5px;
	vertical-align: top;
	padding: 5px;
	border-top: 1px dotted #aaaaaa;
	padding-top: 10px;
    box-sizing:border-box
}
/* For 2 column layout */
.row {
  display: table-row
}

Answer 2

您可以使用flex布局：

.newsTable {
  display: flex;
  flex-flow: row wrap;
}

.lastAnchor {
  flex: 1 0 45%;
  font-size: 9pt;
  width: calc(50% - 10px);
  margin: 5px;
  vertical-align: top;
  padding: 5px;
  border-top: 1px dotted #aaaaaa;
  padding-top: 10px;
  box-sizing: border-box
}

<div class="inner newsTable">

  <a class="lastAnchor">
    Lorem ipsum dolor sit amet, ea aperiam convenire eam, quodsi tritani ex qui. Et cum case doctus argumentum, semper feugiat rationibus eum ei. Cu hinc fugit accommodare per, ex exerci volutpat repudiare eum, tale novum percipitur ius cu. An mea nemore convenire, te quo indoctum hendrerit. Vocent nostrud platonem ei sit, vim ut mucius minimum, ea sed qualisque vulputate. Epicurei persequeris mediocritatem id sit, cum labitur conceptam ut. In utamur appellantur ius, ex integre electram vix, no per ponderum suscipiantur.
	</a>

  <a class="lastAnchor">
    Lorem ipsum dolor sit amet, ea aperiam convenire eam, quodsi tritani ex qui. Et cum case doctus argumentum, semper feugiat rationibus eum ei. 
	</a>

  <a class="lastAnchor">
    Lorem ipsum dolor sit amet, ea aperiam convenire eam, quodsi tritani ex qui. Et cum case doctus argumentum, semper feugiat rationibus eum ei. Cu hinc fugit accommodare per, ex exerci volutpat repudiare eum.
	</a>

  <a class="lastAnchor">
    Lorem ipsum dolor sit amet, ea aperiam convenire eam, quodsi tritani ex qui. Et cum case doctus argumentum, semper feugiat rationibus eum ei. Cu hinc fugit accommodare per, ex exerci volutpat repudiare eum, tale novum percipitur ius cu. An mea nemore convenire, te quo indoctum hendrerit. Vocent nostrud platonem ei sit, vim ut mucius minimum, ea sed qualisque vulputate. Epicurei persequeris mediocritatem id sit, cum labitur conceptam ut. In utamur appellantur ius, ex integre electram vix, no per ponderum suscipiantur.
	</a>

</div>

每行具有相同高度单元格的表格布局

2 个答案: