Question

は、次のフィドルを考えてみましょう。

可能であれば、colorNameがそこを越えるのに十分な時間があれば、「BP」も重なりたいと思います。

HTMLまたはCSSに必要な変更を自由に提案してください。

<div class="wide-field"> 
<div class="info-area" id="colorlist-textarea"> 
<div class='artboard-colors'> 
<span class='colorName'>PANTONE Bleck</span> 
<span class='colorName'>PANTONE Bleck</span> 
<span class='colorName'>PANTONE Bleck</span> 
<span class='colorName'>PANTONE Bleck</span> 
<span class='artboard-id'>BP</span> 
</div> 
</div> 
</div> 

.wide-field { 
display: inline-block; 
width: 98%; 
} 

.info-area { 
border: 1px solid black; 
font-size: 14px; 
width: 100%; 
resize: none; 
overflow: auto; 
padding: 5px; 
} 

#colorlist-textarea { 
height: 15em; 
} 

.artboard-colors 
{ 
display: inline-block; 
width: 100%; 
border: 1px dashed darkgreen; 
padding: 1px; 
margin: 1px; 
} 

.colorName 
{ 
display: inline-block; 
vertical-align:middle; 
border:solid black 1px; 
width: 75%; 
} 

.artboard-id 
{ 
float: right; 
text-align: right; 
display: inline-block; 
vertical-align:middle; 
width: 20%; 
border: 1px solid #d1c7ac; 
} 

Answer 1

オーバーラップが必要な場合は、配置を使用する必要があります。

BP要素の絶対配置を使用すると、（変換によって調整された）親divの高さの50％でその位置を固定し、カラーバーの上に置くことができます。

注：バーの幅を75％削除したため、BP要素に到達しないことがありました。

また、「colorname」スパンをinline-blockから平文old blockに変更しました。

.wide-field { 
 
    display: inline-block; 
 
    width: 98%; 
 
} 
 
.info-area { 
 
    border: 1px solid black; 
 
    font-size: 14px; 
 
    width: 100%; 
 
    resize: none; 
 
    overflow: auto; 
 
    padding: 5px; 
 
} 
 
#colorlist-textarea { 
 
    height: 15em; 
 
} 
 
.artboard-colors { 
 
    display: inline-block; 
 
    width: 100%; 
 
    border: 1px dashed darkgreen; 
 
    padding: 1px; 
 
    margin: 1px; 
 
    position: relative; 
 
} 
 
.colorName { 
 
    display: block; 
 
    border: solid black 1px; 
 
} 
 
.artboard-id { 
 
    position: absolute; 
 
    right: 0; 
 
    width: 20%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    text-align: right; 
 
    vertical-align: middle; 
 
    border: 1px solid #d1c7ac; 
 
    background: lightblue; 
 
}

<div class="wide-field"> 
 
    <div class="info-area" id="colorlist-textarea"> 
 
    <div class='artboard-colors'> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='artboard-id'>BP</span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

私は関係なく存在しているどのように多くのcolorNames、は、colorNameスパン垂直にセンタリングしないように、「BP」が含まれてスパンを取得したいのですが。

このコードはこの問題を解決するはずです。 thisの修正バージョンで、相対位置ではなく絶対位置指定を使用しているため、何個でも何十億もの数があってもフレキシブルです。

.wide-field { 
 
    display: inline-block; 
 
    width: 98%; 
 
} 
 

 
.info-area { 
 
    border: 1px solid black; 
 
    font-size: 14px; 
 
    width: 100%; 
 
    resize: none; 
 
    overflow: auto; 
 
    padding: 5px; 
 
} 
 

 
#colorlist-textarea { 
 
    outline: 1px dashed red; 
 
    position: relative; 
 
} 
 

 
.artboard-colors { 
 
    display: block; 
 
    width: 100%; 
 
    border: 1px dashed darkgreen; 
 
    padding: 1px; 
 
    margin: 1px; 
 
} 
 

 
.colorName { 
 
    display: block; 
 
    border:solid black 1px; 
 
    width: 75%; 
 
} 
 

 
.artboard-id { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    right: 0; 
 
    text-align: right; 
 
    width: 20%; 
 
    border: 1px solid #d1c7ac; 
 
    display: block; 
 
}

<div class="wide-field"> 
 
    <div class="info-area" id="colorlist-textarea"> 
 
    <div class='artboard-colors'> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
     <span class='colorName'>PANTONE Bleck</span> 
 
    </div> 
 
    <span class='artboard-id'>BP</span> 
 
    </div> 
 
</div>