我想在一个框中添加两段不同的文本
html - 将两个div与框中的文本对齐-LMLPHP
要求:
文本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>

为附加问题添加图像:
html - 将两个div与框中的文本对齐-LMLPHP

最佳答案

使用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>

09-10 05:15
查看更多