Html 对齐两个div'；在一个框中包含文本

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

要求：

• 文本1：左上对齐（框大小的85%）
• 文本2：右下对齐（框大小的15%）

我仍在努力调整

到目前为止，我的代码是：

/*彩色内容框*/
.box gray，
.白色盒子{
宽度：1000px；
边际：0.25px；
溢出：隐藏；
填充：10px；
-webkit边界半径：10px；
边界半径：10px；
}
.盒子灰{
背景色：#E2；
边框：1px实心#bdbdbd；
位置：相对位置；
左：100px；
}
.白色盒子{
背景色：#ffffff；
边框：1px实心#ffffff；
}
#左{
浮动：左；
宽度：85%；
文本对齐：左对齐；
}
#对{
浮动：对；
宽度：15%；
文本对齐：右对齐；
字体大小：x-small；
}
身体{
背景色：#f2e6d9；
}

你好
21-02-2016 11:02:03

试试这个：

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

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

/*彩色内容框*/
.box gray，
.白色盒子{
宽度：1000px；
边际：0.25px；
溢出：隐藏；
填充：10px；
-webkit边界半径：10px；
边界半径：10px；
}
.盒子灰{
背景色：#E2；
边框：1px实心#bdbdbd；
位置：相对位置；
左：100px；
}
.白色盒子{
背景色：#ffffff；
边框：1px实心#ffffff；
}
#左{
浮动：左；
宽度：85%；
文本对齐：左对齐；
}
#对{
位置：绝对位置；
底部：5px；
右：10px；
宽度：15%；
文本对齐：右对齐；
字体大小：x-small；
}
身体{
背景色：#f2e6d9；
}

你好
21-02-2016 11:02:03

试试这个：

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

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

/*彩色内容框*/
.box gray，
.白色盒子{
宽度：1000px；
边际：0.25px；
溢出：隐藏；
填充：10px；
-webkit边界半径：10px；
边界半径：10px；
}
.盒子灰{
背景色：#E2；
边框：1px实心#bdbdbd；
位置：相对位置；
左：100px；
}
.白色盒子{
背景色：#ffffff；
边框：1px实心#ffffff；
}
#左{
浮动：左；
宽度：85%；
文本对齐：左对齐；
}
#对{
位置：绝对位置；
底部：5px；
右：10px；
宽度：15%；
文本对齐：右对齐；
字体大小：x-small；
}
身体{
背景色：#f2e6d9；
}

你好
21-02-2016 11:02:03

Flexbox可以做到：

.box灰色{
宽度：90%；
边际：0.25px；
溢出：隐藏；
填充：10px；
-webkit边界半径：10px；
边界半径：10px；
高度：100px；
显示器：flex；
}
.盒子灰{
背景色：#E2；
边框：1px实心#bdbdbd；
位置：相对位置；
}
.白色盒子{
背景色：#ffffff；
边框：1px实心#ffffff；
}
#左{
弹性：0.85%；
}
#对{
弹性：0.15%；
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
字体大小：x-small；
}

Lorem ipsum dolor sit amet，奉献精英。是否需要尊重他人或他人的权利

21-02-2016 11:02:03

Flexbox可以做到：

.box灰色{
宽度：90%；
边际：0.25px；
溢出：隐藏；
填充：10px；
-webkit边界半径：10px；
边界半径：10px；
高度：100px；
显示器：flex；
}
.盒子灰{
背景色：#E2；
边框：1px实心#bdbdbd；
位置：相对位置；
}
.白色盒子{
背景色：#ffffff；
边框：1px实心#ffffff；
}
#左{
弹性：0.85%；
}
#对{
弹性：0.15%；
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
字体大小：x-small；
}

Lorem ipsum dolor sit amet，奉献精英。是否需要尊重他人或他人的权利

21-02-2016 11:02:03

使用flexbox您可以做到这一点

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

/*彩色内容框*/
.box gray，
.白色盒子{
宽度：1000px；
最大宽度：80%；
/*演示*/
边际：0.25px；
溢出：隐藏；
填充：10px；
-webkit边界半径：10px；
边界半径：10px；
}
.盒子灰{
背景色：#E2；
边框：1px实心#bdbdbd；
位置：相对位置；
/*左：100px*/
显示：内联flex；
高度：100px；
/*演示*/
}
.白色盒子{
背景色：#fff；
边框：1px实心#fff；
}
.圆圈{
背景：#ff0000无重复滚动0；
边界半径：50%；
显示：内联flex；
高度：30px；
垂直对齐：顶部；
宽度：30px；
利润率：50像素10像素0；
}
#左{
弹性：0.85%；
}
#对{
弹性：0.15%；
自对准：柔性端；
字体大小：x-small；
文本对齐：右对齐
}
身体{
背景色：#f2e6d9；
}

喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂
21-02-2016 11:02:03

使用flexbox您可以做到这一点

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

/*彩色内容框*/
.box gray，
.白色盒子{
宽度：1000px；
最大宽度：80%；
/*演示*/
边际：0.25px；
溢出：隐藏；
填充：10px；
-webkit边界半径：10px；
边界半径：10px；
}
.盒子灰{
背景色：#E2；
边框：1px实心#bdbdbd；
位置：相对位置；
/*左：100px*/
显示：内联flex；
高度：100px；
/*演示*/
}
.白色盒子{
背景色：#fff；
边框：1px实心#fff；
}
.圆圈{
背景：#ff0000无重复滚动0；
边界半径：50%；
显示：内联flex；
高度：30px；
垂直对齐：顶部；
宽度：30px；
利润率：50像素10像素0；
}
#左{
弹性：0.85%；
}
#对{
弹性：0.15%；
自对准：柔性端；
字体大小：x-small；
文本对齐：右对齐
}
身体{
背景色：#f2e6d9；
}

你好你好你好，Hell