Aligner l'image à droite du groupe de listes d'amorçage

Question

Vous avez besoin de l'image à remplir de haut en bas à droite du groupe de listes. J'ai plusieurs substitutions de css dans ma section de style, et ne peux pas sembler comprendre ce qui me manque? pas sûr si donner une hauteur fixe est la bonne façon de faire ou comment le faire remplir la hauteur de la liste.

l'image ci-jointe montre l'alignement actuel qui semble être en dessous de l'étiquette?

certaines listes seront déjà ajoutées à la ligne ci-dessous.

<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

Voici une CSS seule solution pour votre problème.

Fondamentalement, j'ai mis le div avec la classe checkbox comme width:100%.

Ensuite, je fais la div de l'image, comme display:inline-block de sorte qu'il ne prend pas toute la largeur. Ensuite, réglez-le à droite en utilisant la propriété float:right;, mais cela entraînera le parent à ne pas détecter la hauteur des éléments, pour résoudre ce problème, j'ai ajouté un clearfix. Reportez-vous here pour plus d'informations sur clearfix.

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>

ici est une solution CSS3 si vous êtes op en à cela. En utilisant les propriétés flex, nous pouvons faire de même en définissant 3 propriétés seules!

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>