我在使用CSS float:right时遇到问题;当我移除<Frame
HorizontalOptions="Center"
Margin="20,50,20,0"
Padding="10"
WidthRequest="300"
HasShadow="true">
<FlexLayout
x:Name="TextContainer"
Direction="Row"
AlignItems="End"
JustifyContent="SpaceBetween"
Wrap="Wrap"/>
</Frame>
中的var textparts = "This is a long text to be justified"
.Split(' ', StringSplitOptions.RemoveEmptyEntries)
.Select(x => new Label
{
Text = x,
FontSize = 12,
TextColor = Color.FromHex("#555555"),
Margin = new Thickness(1, 0)
});
foreach (var textpart in textparts)
TextContainer.Children.Add(textpart);
时,将显示float:right;
,但我需要.container
这是 DEMO 。您看不到图像。当您删除.app-chat-image-more
中的float:right时,您可以看到图像。如何使用float:right;处理图片显示? 。任何人都可以帮我吗?
float:right;
.container
答案 0 :(得分:2)
给.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>