我需要一个示例html/css,它提供以下结果
23:59 icon Some text which can wrap
like this
icon Some text which can wrap
like this
所以有两行代码。第一行以时间开头。第二行缩进相同的宽度,以便图标对齐。图标比文本稍大一点,只是为了让事情变得更棘手。在每个图标的右边是一些可以自动对齐的文本。
会非常感谢一些如何做到这一点的想法。
我也在寻找一个建议如何连接2个图标与垂直线,以便如果图标是圆,那么整个事情将出现为垂直杠铃。但这可能太麻烦了
发布于 2019-05-10 03:45:28
如果我没理解错的话,我认为Flex-Box应该可以工作。也许你可以看看css-ticks来获得一些灵感。
这应该是可行的:
.flex-row {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
i {
font-size: 2rem
}
div {
padding: 6px
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>
<div class="flex-row">
<div>12:30</div>
<div>
<i class="fas fa-check"></i>
</div>
<div>Lorem ipsum dolor set amet..</div>
</div>
<div class="flex-row">
<div>12:30</div>
<div>
<i class="fas fa-times"></i>
</div>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam..</div>
</div>
发布于 2019-05-10 03:36:53
把东西放在它们受人尊敬的div
中,然后把它们放在你想放的地方。
.wrapper {
float: left;
}
div {
padding-right: 5px;
}
span {
float: right;
padding-left: 15px;
width: 180px;
}
<div class="wrapper">
<div>
23:59
</div>
</div>
<div class="wrapper">
<div>
icon
<span>Some text which can wrap like this</span>
</div>
<div class="wrapper">
icon
<span>Some text which can wrap like this</span>
</div>
</div>
发布于 2019-05-10 03:34:30
您可以使用table轻松实现该布局。
为了用垂直线连接两个图标,我会使用伪选择器。
/* Selects pseudo element :before on every second icon */
.icon:nth-child(even)::before {
content: '';
display: block;
width: 1px;
height: 20px;
background: #000;
position: relative;
top: -20px;
}
它需要一些调整,但你已经有了想法。
https://stackoverflow.com/questions/56066145
复制相似问题