ブートストラップリストグループの右側にイメージを整列する

Question

イメージをリストグループの右端の上から下に塗りつぶす必要があります。私は私のスタイルのセクションでいくつかのCSSのオーバーライドを持っていて、私が何が欠けているのか分からないようです。固定された高さの幅を与えるかどうか、またはそれがセットリストの高さを埋める方法はわかりません。

添付画像は、ラベルの下にあるように見える現在の位置合わせを示していますか？

一部のリストは既に下の行にドロップされます。

<style> 

.checkbox label:after, 
.radio label:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 

.checkbox .cr, 
.radio .cr { 
    position: relative; 
    display: inline-block; 
    border: 1px solid #a9a9a9; 
    border-radius: .25em; 
    width: 1.3em; 
    height: 1.3em; 
    float: left; 
    margin-right: .5em; 
} 

.radio .cr { 
    border-radius: 50%; 
} 

.checkbox .cr .cr-icon, 
.radio .cr .cr-icon { 
    position: absolute; 
    font-size: .8em; 
    line-height: 0; 
    top: 50%; 
    left: 20%; 
} 

.radio .cr .cr-icon { 
    margin-left: 0.04em; 
} 

.checkbox label input[type="checkbox"], 
.radio label input[type="radio"] { 
    display: none; 
} 

.checkbox label input[type="checkbox"] + .cr > .cr-icon, 
.radio label input[type="radio"] + .cr > .cr-icon { 
    transform: scale(3) rotateZ(-20deg); 
    opacity: 0; 
    transition: all .3s ease-in; 
} 

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon, 
.radio label input[type="radio"]:checked + .cr > .cr-icon { 
    transform: scale(1) rotateZ(0deg); 
    opacity: 1; 
} 

.checkbox label input[type="checkbox"]:disabled + .cr, 
.radio label input[type="radio"]:disabled + .cr { 
    opacity: .5; 
} 

.bv-bg-lightpink { 
    background-color: lightpink; 
    pointer-events: none; 
    cursor: default; 
} 

.bv-bg-lightblue { 
    background-color: lightblue; 
    pointer-events: none; 
    cursor: default; 
} 

.bv-bg-lightyellow { 
    background-color: lightyellow; 
    pointer-events: none; 
    cursor: default; 
} 

.bv-bg-lightgreen { 
    background-color: lightgreen; 
    pointer-events: none; 
    cursor: default; 
} 

.bv-bg-yellow { 
    background-color: yellow; 
    pointer-events: none; 
    cursor: default; 
} 

.bv-bg-red { 
    background-color: red; 
    pointer-events: none; 
    cursor: default; 
} 

.bv-not-active { 
    pointer-events: none; 
    cursor: default; 
} 

.MyDrugPix img { 
    width: 40px; 
    height: 40px; 
    float:right 
} 

</style> 

HTML：

<a href="#acet" class="list-group-item" data-toggle="collapse" style="background-color: lightyellow;"> 
     <div class="checkbox"> 
      <label style="font-size: 1.5em"> 
      ACETAMINOPHEN 
      </label> 
      <div class="MyDrugPix" style="padding-right: 0px;"><img src="/images/IMG_0741.JPG" alt="DRUGS" class="img-responsive"></div> 
     </div> 
    </a> 

Answer 1

ここでは、CSSはあなたの問題の唯一の解決策です。

基本的には、checkboxというクラスのdivをwidth:100%と設定しました。

次に、画像のdivをdisplay:inline-blockとし、全体の幅を占めないようにします。次に、プロパティfloat:right;を使用して右側に設定しますが、親が要素の高さを検出しないようにします。これを解決するために、私はclearfixを追加しました。 clearfixの詳細については、hereを参照してください。

CSS：

.MyDrugPix { 
    padding-right: 0px; 
    display: inline-block; 
    float: right; 
} 

.checkbox { 
    width: 100%; 
} 

Clearfix：あなたはオペアンプであれば

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
} 

* html .clearfix { 
    zoom: 1; 
} 


/* IE6 */ 

*:first-child+html .clearfix { 
    zoom: 1; 
} 

.checkbox label:after, 
 
.radio label:after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.checkbox .cr, 
 
.radio .cr { 
 
    position: relative; 
 
    display: inline-block; 
 
    border: 1px solid #a9a9a9; 
 
    border-radius: .25em; 
 
    width: 1.3em; 
 
    height: 1.3em; 
 
    float: left; 
 
    margin-right: .5em; 
 
} 
 

 
.radio .cr { 
 
    border-radius: 50%; 
 
} 
 

 
.checkbox .cr .cr-icon, 
 
.radio .cr .cr-icon { 
 
    position: absolute; 
 
    font-size: .8em; 
 
    line-height: 0; 
 
    top: 50%; 
 
    left: 20%; 
 
} 
 

 
.radio .cr .cr-icon { 
 
    margin-left: 0.04em; 
 
} 
 

 

 
/*My changes*/ 
 

 
.MyDrugPix { 
 
    padding-right: 0px; 
 
    display: inline-block; 
 
    float: right; 
 
} 
 

 
.checkbox { 
 
    width: 100%; 
 
} 
 

 
/*Clearfix for floating elements*/ 
 

 
.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
} 
 

 
* html .clearfix { 
 
    zoom: 1; 
 
} 
 

 

 
/* IE6 */ 
 

 
*:first-child+html .clearfix { 
 
    zoom: 1; 
 
} 
 

 

 
/* IE7 */

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<a href="#acet" class="list-group-item" data-toggle="collapse" style="background-color: lightyellow;"> 
 
    <div class="checkbox clearfix"> 
 
    <label style="font-size: 1.5em"> 
 
      ACETAMINOPHEN 
 
      </label> 
 
    <div class="MyDrugPix"><img src="http://via.placeholder.com/50x50" alt="DRUGS" class="img-responsive"></div> 
 
    </div> 
 
</a>

ここでは、CSS3のソリューションですそれには。

flexプロパティを使用すると、3つのプロパティだけを設定することで同じことができます。

CSS3

.checkbox { 
    display: flex !important; 
    justify-content: space-between; 
    align-items: center; 
} 

.checkbox label:after, 
 
.radio label:after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.checkbox .cr, 
 
.radio .cr { 
 
    position: relative; 
 
    display: inline-block; 
 
    border: 1px solid #a9a9a9; 
 
    border-radius: .25em; 
 
    width: 1.3em; 
 
    height: 1.3em; 
 
    float: left; 
 
    margin-right: .5em; 
 
} 
 

 
.radio .cr { 
 
    border-radius: 50%; 
 
} 
 

 
.checkbox .cr .cr-icon, 
 
.radio .cr .cr-icon { 
 
    position: absolute; 
 
    font-size: .8em; 
 
    line-height: 0; 
 
    top: 50%; 
 
    left: 20%; 
 
} 
 

 
.radio .cr .cr-icon { 
 
    margin-left: 0.04em; 
 
} 
 

 
.checkbox { 
 
    display: flex !important; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<a href="#acet" class="list-group-item" data-toggle="collapse" style="background-color: lightyellow;"> 
 
    <div class="checkbox"> 
 
    <label style="font-size: 1.5em"> 
 
      ACETAMINOPHEN 
 
      </label> 
 
    <div class="MyDrugPix" style="padding-right: 0px;"><img src="http://via.placeholder.com/50x50" alt="DRUGS" class="img-responsive"></div> 
 
    </div> 
 
</a>