1

テーブルとして表示されるdiv、3つのテーブル行、および1行あたり最大5つのテーブルセルで構成されるレイアウトがあります。私の問題は2つあります：1）テーブル内のセルが5つ未満の場合、テーブルセルを行内で中央に配置する方法がわかりません。2）テーブルの整合性を維持する方法がわかりません。連続して5つ未満の場合の形状。

行のセル数は可変（3〜5）であり、divを使用する必要があります。実際のテーブルは使用できません。

これが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;
}

スクリーンショット： ここに画像の説明を入力してください

4

2 に答える 2

1

テーブルはそれを行いませんが、テーブル内のテーブルはそれを行います。1）外側のテーブルで単一セルの行を使用し、各セル内で新しいテーブルを使用し、内側のテーブルを行の中央に配置します。2）内部テーブル内の各セルで固定（または相対的な）幅と高さを使用する場合があります。

追加：これは、display：tableと古い学校のテーブルで機能します。最も外側のテーブルには、各行に1つのセルのみが必要であり、そのセルに内側のテーブルを配置します。

于 2013-01-08T15:45:55.717 に答える
1

@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;
于 2013-01-23T00:38:29.577 に答える