代码之家 › 专栏 › 技术社区 › Lucas Luan de Melo

如何在div布局上对齐标签

responsive css html

Lucas Luan de Melo · 技术社区 · 7 年前

html table ,显示有关电影的信息。

我正在努力改变这一点 table 到a 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无法实现这一点?

3 回复 | 直到 7 年前

LOTUSMS 7 年前

首先,如果您追求的是响应性,那么您需要找到使用响应性框架、Boostrap或材质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

muito fÃcil,nÃ!)!

Saw Zin Min Tun 7 年前

.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>

BardZH 7 年前

使用DIV和CSS可以获得与table几乎相同的结果,

<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/

使用它的优点是,您有一些额外的功能,如垂直对齐,并将其设置为这样。

如果你想让我把你的代码修改成这样。给我打个电话。