css float不在右侧显示div
css float不在右侧显示div
提问于 2019-03-21 03:51:10
我有一个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>
回答 1
Stack Overflow用户
回答已采纳
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55269111
复制相关文章
相似问题
腾讯云开发者
