对齐两个div的，在一个盒子文本

要求：

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

额外的问题添加图像：

来源

2016-09-20 John Doe

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>

来源

2016-09-20 15:40:21 dippas

一百万的感谢！ –

最后一个问题。是否可以在框前添加一个圆圈？我能够创建一个圆圈，但不能将它放在箱子的前面。 –

你可以画一张画吗？我可以更好地理解你想要什么吗？ – dippas

试试这个：

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

来源

2016-09-20 15:37:06 Johannes

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>

来源

2016-09-20 15:38:53

这可能会很好地用于对齐项目与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>

来源

2016-09-20 16:01:50

你正在''浮动'与'flexbox'混合，不是一个好主意 – dippas

浮动是从OP的代码剩余的。我会编辑删除它们。 –

对齐两个div的，在一个盒子文本

回答

相关问题