在文本中垂直放置浮动div

Question

我正在尝试找到一个纯CSS解决方案来创建一个带有特色引用部分的文章,该部分从50px页面开始(或如此).此部分应为50%宽度,文本应围绕它(顶部和底部).

目前我有标准的浮点解决方案,它出现在文本的顶部.

小提琴演示

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

Answer 1

那么另一个div包装器和一些顶部填充和负边距呢？

DEMO

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;
}