我有一个css浮动的问题:对;当我删除.container
中的float:right;
时,.app-chat-image-more
将会显示,但我需要float:right;
这是你看不到的图片。当你移除.container
中的float:right,你就可以看到图片了。如何使用float:right;处理图片的显示。有谁能帮帮我吗?
.container {
max-width: 60%;
-webkit-border-radius: 10px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
background-color: #dcf8c6;
box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
float: right;
}
.app-chat-image-more {
width: 100%;
-webkit-border-radius: 10px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-radius: 10px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
overflow: hidden;
display: inline-block;
float: right;
}
.chat-image-more-item {
position: relative;
float: left;
width: calc(100% / 2 - 2px);
width: -webkit-calc(100% / 2 - 2px);
width: -moz-calc(100% / 2 - 2px);
padding: 1px;
}
.app-chat-image-item {
position: relative;
padding-top: 100%;
position: relative;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
.chat-hidden-image-item {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
}
<div class="container">
<div class="app-chat-image-more">
<div class="chat-image-more-item">
<div class="app-chat-image-item" style="background-image: url('http://www.cartoondistrict.com/wp-content/uploads/2015/02/avatar-wallpaper-for-Pc-11.jpg');">
<img src="http://www.cartoondistrict.com/wp-content/uploads/2015/02/avatar-wallpaper-for-Pc-11.jpg">
</div>
</div>
</div>
</div>
发布于 2019-03-21 04:02:55
给.container
一个width: 100%
。
由于您已经设置了max-width: 60%
,因此宽度实际上是60%。但是,您需要设置宽度才能使用float: right
。
.container {
width: 100%;
max-width: 60%;
-webkit-border-radius: 10px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
background-color: #dcf8c6;
box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
float: right;
}
.app-chat-image-more {
width: 100%;
-webkit-border-radius: 10px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius: 10px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-radius: 10px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
overflow: hidden;
display: inline-block;
float: right;
}
.chat-image-more-item {
position: relative;
float: left;
width: calc(100%/2 - 2px);
width: -webkit-calc(100%/2 -2px);
width: -moz-calc(100%/2 -2px);
padding: 1px;
}
.app-chat-image-item {
position: relative;
padding-top: 100%;
position: relative;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
.chat-hidden-image-item {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
}
<div class="container">
<div class="app-chat-image-more">
<div class="chat-image-more-item">
<div class="app-chat-image-item" style="background-image: url('http://www.cartoondistrict.com/wp-content/uploads/2015/02/avatar-wallpaper-for-Pc-11.jpg');">
<img src="http://www.cartoondistrict.com/wp-content/uploads/2015/02/avatar-wallpaper-for-Pc-11.jpg">
</div>
</div>
</div>
</div>
https://stackoverflow.com/questions/55269111
复制相似问题