Container Div设置，内部div位于左侧50％，按钮位于主容器右下方

Question

我正在尝试并且未能设置包含内容的容器。

Container div 300px high，580px width，有背景图片

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

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

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