需要图片在列表组的右侧从上到下填充。我的风格部分有几个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>
答案 0 :(得分:2)
以下是针对您的问题的仅限CSS的解决方案。
基本上我将div checkbox
设为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 */
&#13;
<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>
&#13;
这是一个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;
}
&#13;
<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>
&#13;