1

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

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

这是一个代码笔：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;
}

截屏： 在此处输入图像描述

4

2 回答 2

1

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

添加：这将适用于 display:table 以及 old-school table。最外层表的每一行应该只有一个单元格，并且在该单元格中放置内表。

于 2013-01-08T15:45:55.717 回答
1

基于@Jojje 的建议，答案在于在 div 结构中创建一个额外的“内部”级别（显示：表）。解决方案在 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;
于 2013-01-23T00:38:29.577 回答