时间戳

首页 > 解决方案 > 如何在左上角制作内部div位置

html - 如何在左上角制作内部div位置

问题描述

我有一个主 div，我在其中创建了一个小 div，现在试图定位在左上角，但它不起作用。实际上我有一个要求，如果文本很小，则将其放置在垂直中心。但是，如果文本增长，则将其移动到顶部，直到达到主 div 的高度，然后将其换行。有人可以给我提示如何在左上角制作这个小块（刻度标记 div），这样它就不会改变它的位置，无论文本是大还是短。

.main-box{
    border: 1px solid #adb8c0;
    height: 80px;
    width: 119px;
    color: #026890;
}
.small-box {
    float: left;
    width: 16px;
    height: 16px;
    font-size: 16px;
    border: 1px solid rgba(0, 0, 0, .2);
    position:  relative;
    color: lightgrey;
    text-align: center;
    font-weight: bold;
}

.flag-label{
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    color: #026890;
    text-align: center;
}


div.horizontal {
    display: flex;
    justify-content: center;
    background-color: #cff;
 /*   width: 100px;
    height: 60px;*/
}
div.vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color:black;
}
<div class="row ng-scope" style="padding-left:17px;" >
  <div class="col-xs-3 horizontal main-box ng-scope" >
  <div class="small-box">✓&lt;/div>
  <div class="vertical">
    <span class="flag-label ng-binding"> this is a correct position</span>
  </div>
</div> 

<div class="col-xs-3 horizontal main-box ng-scope">
  <div class="small-box" >✓&lt;/div>
  <div class="vertical">
    <span class="flag-label ng-binding">one</span>
  </div>
</div> 

<div class="col-xs-3 horizontal main-box ng-scope" >
  <div class="small-box">✓&lt;/div>
  <div class="vertical">
    <span class="flag-label ng-binding">one two</span>
  </div>
</div>  

<div class="col-xs-3 horizontal main-box ng-scope" >
  <div class="small-box">✓&lt;/div>
  <div class="vertical">
    <span class="flag-label ng-binding">one two three four fiv six</span>
  </div>
</div>

PS：我正在使用行等，因为这些块实际上在我的代码中连续显示（每行 3 个块项目）

标签： htmlcss

解决方案

您可以从添加position:relativetomain-box和position:absolute, top: 0, left: 0;to开始small-box。添加至少 16px 的 padding-left （也为平衡而右）flag-label以防止 if 进入标志。显然这只能解决您的问题，如果没有额外的样式，它看起来不会很好。

推荐阅读