我想在一个框中添加两段不同的文本
要求:
文本1:左上对齐(大小框的85%)
文本2:右下对齐(大小框的15%)
我仍然在努力调整。
我的代码:
/* Colored Content Boxes */
.box-gray,
.box-white {
width: 1000px;
margin: 0 0 25px;
overflow: hidden;
padding: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.box-gray {
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
position: relative;
left: 100px;
}
.box-white {
background-color: #ffffff;
border: 1px solid #ffffff;
}
#left {
float: left;
width: 85%;
text-align: left;
}
#right {
float: right;
width: 15%;
text-align: right;
font-size: x-small;
}
body {
background-color: #f2e6d9;
}
<div class="box-gray">
<div id="left">Hello</div>
<div id="right">21-02-2016 11:02:03</div>
</div>
为附加问题添加图像:
最佳答案
使用flexbox,您可以这样做
注:已更新以回答更新的问题
/* Colored Content Boxes */
.box-gray,
.box-white {
width: 1000px;
max-width: 80%;
/* demo */
margin: 0 0 25px;
overflow: hidden;
padding: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.box-gray {
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
position: relative;
/*left: 100px; */
display: inline-flex;
height: 100px;
/* demo */
}
.box-white {
background-color: #fff;
border: 1px solid #fff;
}
.circle {
background: #ff0000 none repeat scroll 0 0;
border-radius: 50%;
display: inline-flex;
height: 30px;
vertical-align: top;
width: 30px;
margin:50px 10px 0 0;
}
#left {
flex: 0 0 85%;
}
#right {
flex: 0 0 15%;
align-self: flex-end;
font-size: x-small;
text-align: right
}
body {
background-color: #f2e6d9;
}
<div class="circle"></div>
<div class="box-gray">
<div id="left">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</div>
<div id="right">21-02-2016 11:02:03</div>
</div>