Question

我有一个由div组成的布局，显示为表格，3个表格行，每行最多5个表格单元格。我的问题是双重的： 1）如果表格中的单元格少于五个，我无法弄清楚如何将表格单元格放在行中 2）当连续少于5个时，我无法弄清楚如何保持形状的完整性。

一行中的单元格数量是可变的（在3到5之间），我必须使用divs - 我不能使用真实的表格。

这是一个codepen：http://codepen.io/Jaemaz/full/aCboe

以下是来源：

HTML：

<div class="focus-container">
  <div class="focus-row">
    <div class="focus-element  circle">
      <span class="ng-scope">
        Option A
      </span>
      </div>
      <div class="focus-element  circle">
        <span class="ng-scope">
          Option B
        </span>
      </div>
      <div class="focus-element  circle">
        <span class="ng-scope">
          Option C
        </span>
      </div>
      <div class="focus-element  circle">
        <span class="ng-scope">
          Option D
        </span>
      </div>
      <div class="focus-element  circle">
        <span class="ng-scope">
          Option E
        </span>
      </div>
  </div>
  <div class="focus-row">
    <div class="focus-element  circle" ng-class="{unknown: unknown, square: square, circle: circle, selected: selected, shouldHaveBeenSelected: shouldHaveBeenSelected, shouldNotHaveBeenSelected: shouldNotHaveBeenSelected}" ng-click="click()" ng-transclude="" focuschoice="" identifier="F" enabled="true">
      <span class="ng-scope">
        Option F
      </span>
  </div>
  </div>
</div>

CSS：

.focus-container {
width: 560px;
height: auto;
display: table;
background-color: #000;
border-spacing: 15px;
table-layout: fixed;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}

.focus-row {
width: 100%;
height: 100%;
display: table-row;
}

.focus-element {
width: 90px;
height: 90px;
display: table-cell;
color: #fff;
background: #808080;
border: 2px solid #BFBFBF;
vertical-align: middle;
text-align: center;
font-family: "Ubuntu", Arial, Helvetica, sans-serif;
font-size: 14px;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 1);
max-width: 94px;
}

.focus-element.circle {
-moz-border-radius: 94px;
-webkit-border-radius: 94px;
border-radius: 94px;
}

屏幕截图： enter image description here

Answer 1

表不会这样做，但表中的表会。 1）在外表中使用单个单元格行，在每个单元格中使用新表，并将内部表放在行中。 2）您可以在内表中的每个单元格上使用固定（或某些相对）宽度和高度。

增加：这将适用于display：table和old-school table。最外面的表应该每行只有一个单元格，并在该单元格中放置内部表格。

Answer 2

基于@Jojje的建议，答案在于在div结构中创建一个额外的“内部”级别（display：table）。解决方案在CodePen上：http://codepen.io/Jaemaz/pen/spbKf

如果Codepen消失，这里是示例HTML和CSS：

<强> HTML

<div class="focus-container">
  <div class="focus-row">
    <div class="inner">
      <div class="focus-element circle">
        <span>ahem</span>
      </div>
    </div>
  </div>
  <div class="focus-row">
    <div class="inner">
      <div class="focus-element circle">
        <span>hello</span>
      </div>
      <div class="focus-element circle">
        <span>there</span>
      </div>
    </div>
  </div>
  <div class="focus-row">
    <div class="inner">
      <div class="focus-element circle">
        <span>what</span>
      </div>
      <div class="focus-element circle">
        <span class="content">is</span>
      </div>
      <div class="focus-element circle">
        <span>happening</span>
      </div>
      <div class="focus-element circle">
        <span>happening</span>
      </div>
      <div class="focus-element circle">
        <span>happening</span>
      </div>
    </div>
  </div>
</div>

<强> CSS

.focus-container {
  width: 560px;
  background-color: #000;
  padding: 5px;
}

.focus-container .focus-row {
  height: 110px;
  background-color: #000
}

.focus-container .focus-row .inner {
  display: table;
  margin: 0 auto;
  height: 110px;
}

.focus-container .focus-row .inner .focus-element {
  float: left;
  text-align: center;
  margin: 0 auto;
  width: 94px;
  height: 94px;
  background-color: #009900;
}

.focus-container .focus-row .inner .focus-element span {
  margin-top: 40px;
  display: block;
}

.focus-container .focus-row .inner .circle {
  -moz-border-radius: 94px;
  -webkit-border-radius: 94px;
  border-radius: 94px;
  margin: 8px;

显示中div的水平居中：表格行

2 个答案: