将两个div与文本对齐在一个框中

Question

我想在一个方框中添加两个不同的文字

要求：

• 文字1：左上方对齐（尺寸框的85％）
• 文字2：右下方对齐（尺寸框的15％）

我仍然在努力对齐。

到目前为止我的代码：

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<div class="box-gray">
  <div id="left">Hello</div>
  <div id="right">21-02-2016 11:02:03</div>
</div>

＆＃13;

＆＃13;

＆＃13;

为其他问题添加了图片：

Answer 1

使用flexbox你可以做到这一点

注意：已更新以回答更新的问题

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

.box-gray {
    position: relative;
}
#right { 
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 15%;
    text-align: right;
    font-size: x-small;
    }

调整底部和右侧参数以微调位置。

/* 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 {
  position: absolute;
  bottom: 5px;
  right: 10px;
  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>

Answer 3

Flexbox 可以做到这一点：

.box-gray {
  width: 90%;
  margin: 0 0 25px;
  overflow: hidden;
  padding: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  height: 100px;
  display: flex;
}
.box-gray {
  background-color: #e2e2e2;
  border: 1px solid #bdbdbd;
  position: relative;
}
.box-white {
  background-color: #ffffff;
  border: 1px solid #ffffff;
}
#left {
  flex: 0 0 85%;
}
#right {
  flex: 0 0 15%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: x-small;
}

<div class="box-gray">
  <div id="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit harum ratione dignissimos illum ipsum odit odio molestiae ipsa quis numquam?</p>
  </div>
  <div id="right">21-02-2016 11:02:03</div>
</div>

CSS表格也是

.box-gray {
  width: 90%;
  margin: 0 0 25px;
  overflow: hidden;
  padding: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  height: 100px;
  display: table;
  table-layout: fixed;
}
.box-gray {
  background-color: #e2e2e2;
  border: 1px solid #bdbdbd;
  position: relative;
}
.box-white {
  background-color: #ffffff;
  border: 1px solid #ffffff;
}
#left {
  display: table-cell;
  width: 85%;
}
#right {
  display: table-cell;
  width: 15%;
  vertical-align: bottom;
  text-align: right;
  font-size: x-small;
}

<div class="box-gray">
  <div id="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit harum ratione dignissimos illum ipsum odit odio molestiae ipsa quis numquam?</p>
  </div>
  <div id="right">21-02-2016 11:02:03</div>
</div>

Answer 4

这可能很适合用Flexbox对齐项目。我借用了本文https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/中的一些代码，其中展示了如何使用flexbox模型垂直对齐div。

将[1]属性添加到box-grey div，然后将值display: flex和align-self的{​​{1}}属性分别添加到左侧和右侧div中。其他值如flex-start和flex-end可以根据您的具体目标进行更改。

有很多flexbox选项/属性。我发现css-tricks中的这篇文章对于可视化不同属性和值的作用非常有用。

align-items: center

justify-content: center