在文本中垂直定位一个浮动的div

Question

我正在尝试寻找一种纯CSS的解决方案，创建一个带有特色引用部分的文章，该部分应该在页面下方大约50像素处开始。此部分应为50％的宽度，并且文本应该围绕其（顶部和底部）进行包裹。

目前我使用了标准的浮动解决方案，在文本顶部出现。

示例：演示

.inset-text {
    display:block;
    width: 50%;
    float: left;
    background: pink;
    margin: 0 5% 2% 0;
}

- Alex Webb

---

请展示你期望的输出，例如以图片形式呈现。 - Manwal

Answer 1

再加一个div包装器以及一些顶部填充和负边距呢？

演示

HTML

<div class="article-container">
    <div class="inset-text">
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="article-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

CSS

.article-container {
    padding-top: 50px;
}

.inset-text {
    /* display:block; */
    width: 50%;
    float: left;
    background: pink;
    /* margin: 0 5% 2% 0; */
    margin-right: 2%;
}

.article-text {
    margin-top: -50px;
}

/*
Because of the top padding set to the article-container the top margin of the first 
p element does not collapse anymore. So just set the top margin to 0.
*/
.article-text p:first-child {
    margin-top: 0;
}

- Fabian Mebus