容器 div 设置，内部 div 位于 50% 左侧，按钮位于主容器的右下方

【问题标题】：Container Div setup with inernal div at 50% left and button bottom right of main container容器 div 设置，内部 div 位于 50% 左侧，按钮位于主容器的右下方
【发布时间】：2015-01-31 10:00:28
【问题描述】：

我正在尝试设置一个包含一些内容的容器，但失败了。

容器 div 高 300px，宽 580px，带有背景图片

内部 Div 150px 宽度和高度，具有透明度。这个div里面的P文本

主容器右下角的阅读更多按钮。

【问题讨论】：

你想解决什么问题？你已经尝试过什么？你做过研究吗？我们如何重现您遇到的问题？为了提高您获得答案的机会，以下是一些提示：stackoverflow.com/help/how-to-ask

标签： html css

【解决方案1】：

也许你正在追求这样的东西，你可以用背景颜色代替背景图像。

CSS：

.container {
    position: relative;
    width: 580px;
    height: 300px;
    background-color: red;
}

.internal {
    position: absolute;
    left: 50%;
    width: 150px;
    height: 150px;  
}

.button {
    position: absolute;
    right: 1em;
    bottom: 1em;
}

HTML：

<div class="container">
    <div class="internal">
        <p>test</p>
    </div>
    <button type="button" class="button">Read more</button>
</div>

【讨论】：