Question

我想在我的css表中使用百分比。不幸的是，它对我没用。

这段代码有什么问题？我应该使用flexbox而不是table吗？

我想使用表格，因为我想要相同的高度列。

＆＃13;

ul {
  list-style: none;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  width: 50%;
  display: table-cell;
}

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

＆＃13;

Answer 1

Flexbox等高度列

<强> HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

<强> CSS

ul { display: flex; }

使用上面的简单代码，您可以将任意数量的内容放入列表项中，并且所有列表项都具有相同的高度。

DEMO

注意：

Flex容器的初始设置为flex-direction: row，这意味着子元素（也称为flex项）将水平排列。
Flex容器的另一个初始设置是align-items: stretch，这会导致弹性项目扩展容器的整个高度（或宽度，具体取决于flex-direction）。
同时，上述两个设置都会创建相等的高度列。
Flex等高度列仅适用于兄弟姐妹。
将高度应用于弹性项目会覆盖相等高度的特征。
Equal height columns apply only to flex items on the same line
How to disable equal height columns in Flexbox?

浏览器支持： 所有主流浏览器except IE < 10都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer。

中的更多详细信息

Answer 2

以下是使用ul / li元素的示例，2列使用百分比且高度相等。

由于表格更喜欢表格/行/单元格布局，我稍微重构了你的html。

＆＃13;

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.table {
  display: table;
  width: 90%;
  height: 60%;
  padding-top: 5%;
  margin: 0 auto;
}
ul {
  display: table-row;
  list-style: none;
  margin: 0;
}

li {
  display: table-cell;
  width: 50%;
  border: 1px solid #999;
}

＆＃13;

<div class="table">
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <ul>
    <li>3</li>
    <li>4</li>
  </ul>
  <ul>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

＆＃13;

Answer 3

我正在回答对@Michael_B不同的问题的解释。在func textField(textField: UITextField, shouldChangeCharactersInRange range: NSRange, replacementString string: String) -> Bool { let oldString = textField.text as NSString let candidate = oldString.stringByReplacingCharactersInRange(range, withString: string) var error: NSError? let regex = NSRegularExpression(pattern: "^\\d{0,2}(\\.\\d?)?$", options: 0, error: &error) return regex?.firstMatchInString(candidate, options: 0, range: NSRange(location: 0, length: candidate.length)) != nil }元素上使用width: 50%;的初始样式，我认为所需的结果是将六个列表项分为2列和3行。使用CSS表格无法轻易解决这种情况，但使用flexbox则相对简单。

li

ul {
  list-style: none;
  margin: 0;
  width: 100%;
  /*kills the irritating intial padding on uls in webkit*/
  -webkit-padding-start: 0;
  display: flex;
  flex-flow: row wrap;
  /*stretch is the default value, but it will force items to stretch to match others in their row*/
  align-items: stretch;
  /*below properties just emphasize the layout*/
  padding: 2px;
  background-color: green;
}
li {
  /*forces border-width and padding to be part of the declared with (50% in this case)*/
  box-sizing: border-box;
  width: 50%;
  /*list-item, inline-block, and block work equally well*/
  display: list-item;
  /*below properties just emphasize the layout*/
  border: white 2px solid;
  background-color: lightgreen;
}
/*I set this property to show what happens if 1 item has a different height*/

li:nth-child(3) {
  height: 40px;
}

CSS等高柱

3 个答案:

Flexbox等高度列