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

在文本中垂直放置浮动div

1 个答案: