對齊引導列表組右側的圖像

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的解決方案，如果你是運en到它。

使用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>