如何在 div 布局上对齐标签
[英] How to align labels on a div layout
本文介绍了如何在 div 布局上对齐标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个 html table，它显示了关于电影的信息.
由于响应速度的原因，我正在尝试将此 table 更改为 div 布局.对于表格，当我减小窗口宽度时，文本会重叠.
这是我的桌子:
.label{字体粗细:粗体；文本对齐:右；}.blue-box{背景颜色:绿色}
<表格><tr><td class="label">名称:</td><td>德尔托罗</td><td class="label">地籍数据:</td><td>19/05/2017</td><td class="label">Data de atualizacao:</td><td>19/05/2017</td></tr><tr><td class="label">产品类别:</td><td>Diverso</td><td class="label">Ultimo Prêmio:</td><td>Leão De Ouro</td><td class="label">Filme Indicado</td><td>水的形状</td></tr><div>
使用 div 我能够做很多转换，但是对于标签本身，我无法像使用表格布局一样找出对齐标签的方法:
.label{字体粗细:粗体；向左飘浮;文本对齐:右；显示:内联；右边距:5px}.blue-box{背景颜色:海蓝宝石；溢出:隐藏；}.父亲{向左飘浮;边距:0px 5px 0px 5px ;}.内容{向左飘浮;显示:内联；}
<div class="父亲"><div class="label">姓名:
<div class="内容">德尔托罗
<div class="父亲"><div class="label">数据de cadastro:
<div class="内容">19/05/2017
<div class="父亲"><div class="label">数据去中心化:
<div class="内容">19/05/2017
<div class="父亲"><div class="label">产品类别:
<div class="内容">潜水员
<div class="父亲"><div class="label">终极奖赏:
<div class="内容">莱昂德欧鲁
<div class="父亲"><div class="label">印度电影:
<div class="内容">水的形状
我错过了什么?没有办法只用 HTML 来实现这一点吗?
解决方案
首先，如果您追求的是响应性，那么您需要找到采用响应式框架、Boostrap 或 Material UI(基于 flexbox)的方法这将解决您在视口的不同断点处的许多问题，而不会因媒体查询而膨胀您的样式表.其次，您需要修改 HTML 以允许分隔容器.当您使用划分和特异性时，响应性最有效.
这是我将如何重新设计您的 HTML 并使用大量 CSS 解决对齐问题
.row {宽度:100%；显示:内联块；边距:10px 自动；背景:绿色；}.col4 {显示:内联块；宽度:33.33333333%；保证金:1% 0 1% 0；位置:相对；padding-right: 15px;向左飘浮;左边距:15px；最小高度:1px；-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；}.col4 div{显示:内联块；}标签{显示:内联块；最大宽度:100%；底边距:5px；字体粗细:700；}
<div class="col4"><div><label>名称:</label><span>德尔托罗</span>
<div><label>产品类别:</label><span>Diverso</span>
<div class="col4"><div><label>Data de cadastro:</label><span>19/05/2017</span>
<div><label>Ultimo Prêmio:</label><span>Leão De Ouro</span>
<div class="col4"><div><label>Data de atualizacao:</label><span>19/05/2017</span>
<div><label>电影印度:</label><span>水的形状</span>
查看示例 在我的 CODEPEN 中(只需更改HTML 中的值)
现在，这里有一个 Bootstrap.看看我是如何在不进行任何额外媒体查询的情况下生成相同的，并且它是响应式的.只需使用 container、row 和 col-xs-12 col-sm-4
类Boostrap 在此处
有详细记录muito fácil，né！
I have a html table, which shows informations about a movie.
I am trying to change this table to a div layout because of the responsiveness. With table when I reduce the window widht, the text overlaps.
this is my table:
.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>
with divs I was able to do much of the transformation, but with the labels itself, I can't figure out a way to align the labels like when I use the table layout:
.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>
What I'm missing? There's no way to achieve this with only HTML?
解决方案
First of all, if responsiveness is what you're after, you need to find the way to employ a responsive framework, Boostrap or Material UI (flexbox base) This will solve a lot of your problems at different brakpoints of the viewport without bloating your stylesheet with media queries. Second, you need to modify your HTML to allow for compartmentalization of containers. Responsiveness works best when you use compartmentalization and specificity.
Here is how I would rework your HTML and solve the alignment issue with fair amount of 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>
See the example here in my CODEPEN (just change the values in your HTML)
Now, here is one with Bootstrap. Check out how I was able to produce the same and IT IS RESPONSIVE without making any additional media queries. Just by using the classes container, row, and col-xs-12 col-sm-4
Boostrap is very documented here
muito fácil, né!
这篇关于如何在 div 布局上对齐标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
