将两个 div 与框中的文本对齐

Question

我想在一个框中添加两段不同的文本

要求：

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

为其他问题添加图片：

Answer 1

试试这个：

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

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 3

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

Answer 4

这可能是使用 flexbox 对齐项目的好方法。我从这篇文章 https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 中借用了一些代码，其中展示了如何使用 flexbox 模型垂直对齐 divs.

将display: flex属性添加到box-graydiv，然后添加align-self属性，值为flex-start和 flex-end 分别向左和向右 divs。 align-items: center 和 justify-content: center 等其他值可以根据您的具体目标进行更改。

有很多 flexbox options/properties。我发现来自 css-tricks 的这篇文章对于可视化不同的属性和值的作用很有用。

/* Colored Content Boxes */

.box-gray,
.box-white {
  width: 400px;
  margin: 0 0 25px;
  padding: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  overflow:hidden;
  /* ---- New lines here ---- */
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-gray {
  background-color: #e2e2e2;
  border: 1px solid #bdbdbd;
  position: relative;
  left: 100px;
}
.box-white {
  background-color: #ffffff;
  border: 1px solid #ffffff;
}
#left {
  width: 85%;
  text-align: left;
  /* ---- New line here ---- */
  align-self: flex-start;
}
#right {
  width: 15%;
  text-align: right;
  font-size: x-small;
  /* ---- New line here ---- */
  align-self: flex-end;
}
body {
  background-color: #f2e6d9;
}

<div class="box-gray">
  <div id="left">Hello - this is some content that I had to add to make the example work. I need the text to wrap a few lines to really demonstrate how tings are vertically aligning withi the wrapper div.</div>
  <div id="right">21-02-2016 11:02:03</div>
</div>

将两个 div 与框中的文本对齐

Align two div's with text in a box

html

css

text-alignment