Question

我有html table，其中显示有关电影的信息。

我正在尝试将此table更改为div布局，因为它具有响应性。使用表格，当我减少窗口时，文本重叠。

这是我的表：

.label{
  font-weight: bold;
  text-align: right;
}

.blue-box{
  background-color: green
}

<div class="blue-box">  
<table>
<tr>
  <td class="label">Nome:</td>
  <td>Del Toro</td>
  <td class="label">Data de cadastro:</td>
  <td>19/05/2017</td>
  <td class="label">Data de atualizacao:</td>
  <td>19/05/2017</td>
</tr>
<tr>
  <td class="label">Categoria de produto:</td>
  <td>Diverso</td>
  <td class="label">Ultimo Prêmio:</td>
  <td>Leão De Ouro</td>
  <td class="label">Filme Indicado</td>
  <td>Shape of Water</td>
</tr>
</table>
<div>

</div>

使用div我可以进行大部分转换，但是对于标签本身，我无法找到一种方法来对齐标签，就像我使用表格布局时那样：

.label{
  font-weight: bold;
  float: left;
  text-align: right;
  display: inline;
  margin-right: 5px
}

.blue-box{
  background-color: aquamarine;
  overflow: hidden;
}

.father{
  float: left;
  margin: 0px 5px 0px 5px ;
}

.content{
  float: left;
  display: inline;
}

<div class="blue-box">  
<div class="father">
  <div class="label">
  Nome:
  </div>
  <div class="content">
    Del Toro
  </div>
</div>
<div class="father">
  <div class="label">
  Data de cadastro:
  </div>
  <div class="content">
    19/05/2017
  </div>
</div>
<div class="father">
  <div class="label">
  Data de atualizacao:
  </div>
  <div class="content">
    19/05/2017
  </div>
</div>
<div class="father">
  <div class="label">
  Categoria de produto:
  </div>
  <div class="content">
    Diverso
  </div>
</div>
<div class="father">
  <div class="label">
  Ultimo Prêmio:
  </div>
  <div class="content">
    Leão de Ouro
  </div>
</div>
<div class="father">
  <div class="label">
  Filme indicado:
  </div>
  <div class="content">
    Shape of water
  </div>
</div>
</div>

我缺少什么？仅使用HTML无法实现这一目标？

Answer 1

.blue-box{
  background: green;
  padding: 1rem;
}
.father{
  display: inline-block;
  margin: .5rem;
}
.label{
  font-weight: bold;
  float: left;
  width: 80px;
}
.content{
  float: left;
  width: 70px;
}

<div class="blue-box">  
<div class="father">
  <div class="label">
  Nome:
  </div>
  <div class="content">
    Del Toro
  </div>
</div>
<div class="father">
  <div class="label">
  Data de cadastro:
  </div>
  <div class="content">
    19/05/2017
  </div>
</div>
<div class="father">
  <div class="label">
  Data de atualizacao:
  </div>
  <div class="content">
    19/05/2017
  </div>
</div>
<div class="father">
  <div class="label">
  Categoria de produto:
  </div>
  <div class="content">
    Diverso
  </div>
</div>
<div class="father">
  <div class="label">
  Ultimo Prêmio:
  </div>
  <div class="content">
    Leão de Ouro
  </div>
</div>
<div class="father">
  <div class="label">
  Filme indicado:
  </div>
  <div class="content">
    Shape of water
  </div>
</div>
</div>

Answer 2

使用DIV和CSS，

可以获得与表几乎相同的结果

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      Gross but sometimes useful.
    </div>
  </div>
</div>

查看https://css-tricks.com/almanac/properties/d/display/

使用它的优点是你有一些额外的功能，比如vertical-align，它设置得像这样。

如果您希望我将代码修改为此类代码。给我一个嗡嗡声。

Answer 3

首先，如果响应性是您所追求的，您需要找到采用响应式框架的方式，Boostrap或Material UI（flexbox base）这将解决您在视口的不同制动点处的许多问题不使用媒体查询使样式表膨胀。其次，您需要修改HTML以允许容器的分隔。当您使用区域化和特异性时，响应性最有效。

以下是我将如何重写HTML以及使用相当数量的CSS解决对齐问题

.row {
    width: 100%;
    display: inline-block;
    margin: 10px auto;
    background: green;
}

.col4 {
    display: inline-block;
    width: 33.33333333%;
    margin: 1% 0 1% 0;
    position: relative;
    padding-right: 15px;
    float: left;
    padding-left: 15px;
    min-height: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.col4 div{
    display: inline-block;
}

label{
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

<div class="row">
  <div class="col4">
    <div>
      <label>Nome:</label>
      <span>Del Toro</span>
    </div>
    <div>
      <label>Categoria de produto:</label>
      <span>Diverso</span>
    </div>
  </div>
  <div class="col4">
    <div>
      <label>Data de cadastro:</label>
      <span>19/05/2017</span>
    </div>
    <div>
      <label>Ultimo Prêmio:</label>
      <span>Leão De Ouro</span>
    </div>
  </div>
  <div class="col4">
    <div>
      <label>Data de atualizacao:</label>
      <span>19/05/2017</span>
    </div>
    <div>
      <label>Filme Indicado:</label>
      <span>Shape of Water</span>
    </div>
  </div>
</div>

请参阅示例here in my CODEPEN（只需更改HTML中的值）

现在，here is one with Bootstrap。看看我是如何制作相同的，并且在不进行任何其他媒体查询的情况下又有所回应。只需使用课程container，row和col-xs-12 col-sm-4

即可

Boostrap记录在案here

muitofácil，né！

如何在div布局上对齐标签

3 个答案: