對齊兩個div的，在一個盒子文本

Question

我想補充兩段不同的文字在一個盒子裏

要求：

• 文本1：對齊左上角（85對準右下方（尺寸框的15％）

I：大小盒）

文本2％仍然在與陣營掙扎。

我迄今爲止代碼：

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

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 2

試試這個：

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

調整底部和r ight參數來微調位置。

/* 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。

的display: flex屬性添加到箱灰格，然後用flex-start和flex-end到左，右div的值分別添加align-self財產。其他值如align-items: center和justify-content: center可以根據您的具體目標進行更改。

有很多flexbox選項/屬性。我發現從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>