Question

我有一个主要的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">✓</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" >✓</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">✓</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">✓</div>
  <div class="vertical">
    <span class="flag-label ng-binding">one two three four fiv six</span>
  </div>
</div>

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

Answer 1

您可以先将position:relative添加到main-box，再将position:absolute, top: 0, left: 0;添加到small-box。在您的flag-label上至少添加16px左向左填充（也向右填充），以防止其进入该标志之下。显然，这只能解决您的问题，如果没有其他样式，它看起来不会很好。

Answer 2

您需要从justify-content: center;中删除div.horizontal，这将使float:left属性正常工作。

如何在左上角设置内部div位置

2 个答案: