Question

我有一行带有名为card的类的div。一行中最多可以有三张卡片。每张卡的宽度为33％。

html看起来像......

<div class="row">
  <div class="card">card</div>
  <div class="card">card 2</div>
  <div class="card">card 3</div>
</div>

<br>
<br>

<div class="row">
  <div class="card">card</div>
  <div class="card">card 2</div> 
</div>

CSS看起来像......

.row {
  padding: 20px; 
}

.card {
  width: 33%;
  float: left;
  border: solid 1px black;
  position: relative;
}

我还创建了一个codepen here。

如果连续少于3张卡片，我想要的是将这些卡片放在中心位置。我该怎么做呢？

通常情况下，连续3张卡片看起来像......

-------------------------------------------------------------------------------------------
|                             |                                |                          |
|                             |                                |                          |
|                             |                                |                          |
|                             |                                |                          |
|        card                 |            card                |        card              |
|                             |                                |                          |
|                             |                                |                          |
|                             |                                |                          |
|                             |                                |                          |
|                             |                                |                          |
-------------------------------------------------------------------------------------------

当我们连续有2张牌时，它看起来像......

--------------------------------------------------------
|                        |                             | 
|                        |                             | 
|                        |                             | 
|                        |                             | 
|                        |                             | 
|         card           |            card             | 
|                        |                             | 
|                        |                             | 
|                        |                             | 
|                        |                             | 
--------------------------------------------------------

我们希望2张牌像这样居中......

                   -----------------------------------------------------
                   |                        |                          | 
                   |                        |                          | 
                   |                        |                          | 
                   |                        |                          | 
                   |                        |                          | 
                   |         card           |          card            | 
                   |                        |                          | 
                   |                        |                          | 
                   |                        |                          | 
                   |                        |                          | 
                   -----------------------------------------------------

Answer 1

使用text-align: center;代替浮动和.row { padding: 20px; text-align: center; } .card { width: 33%; display: inline-block; border: solid 1px black; }

cellForRowAtIndexPath

http://codepen.io/anon/pen/PbeZgd

Answer 2

您可以使用 css3 flexbox概念概念，将父标记（.row）的显示属性设置为 flex 。然后使用 justify-content 属性并将其值设置为 center 。

.row {
  padding: 20px;
  display: flex;
  justify-content :center;
}

.card {
  width: 33%;
  height:100px;
  /*float: left;*/
  border: solid 1px black;
  /*position: relative;*/
}

<div class="row">
  <div class="card">card</div>
  <div class="card">card 2</div>
  <div class="card">card 3</div>
</div>

<br>
<br>

<div class="row">
  <div class="card">card</div>
  <div class="card">card 2</div> 
</div>

Answer 3

您可以考虑使用display：flex和justify-content：center for this

检查此代码段

＆＃13;

.row {
  display: flex;
  justify-content: center;
}
.card {
  width: 20%;
  height: 50px;
  border: 1px dashed;
}

＆＃13;

<div class="row">
  <div class="card">card</div>
  <div class="card">card 2</div>
  <div class="card">card 3</div>
</div>

<br>
<br>

<div class="row">
  <div class="card">card</div>
  <div class="card">card 2</div>
</div>

＆＃13;

希望有所帮助

将div排成一行

3 个答案: