Question

我有一个位于徽标div下方的菜单按钮图像，位置：固定在视口的右侧。然而，我的正文也直接从徽标div下面开始，所以如果它是一段很大的文本，它会在图像后面运行。

如何让固定位置图像作为自己的行/强制断行/使用display：block /否则将文本向下推，以便文本从图像下方开始？

我尝试过使用display：block with image或image div，但我的造型可能不对。另外，我显然不知道我在做什么，对这个烂摊子感到抱歉！

<head><style>
    img.logo {
    height: 3em;
    max-width: 80%;
    width: auto;
    padding: .5em;
    display: block;
    margin-left: auto;
    margin-right: auto;}

div.menu {
    width: 100%;
    display: block;}

.menu img {
    position: fixed;
    right: .5em;
    padding: .5em;}
</style></head>

<html>
    <img class="logo" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
    <div class="menu">
        <img src="https://dl.dropboxusercontent.com/u/95732802/menu.svg">
    </div>

    I'm some text!
</html>

小提琴：http://jsfiddle.net/ylmk/B5LEk/2/

Answer 1

从文档流中取出position: fixed;或position: absolute;的元素，因此将其display属性设置为block将无法执行任何操作。

如果您知道图像的高度，我只需使用margin或填充，例如：

header {
    padding-bottom: 2em;
}

或者：

header {
    margin-bottom: 2em;
}

或者，如果您在<p>之后只有一系列<header>元素：

header + p { /* if you have a p after it */
    margin-top: 2em;
}

我怎样才能建立一个位置：固定图像自己的线/块？

1 个答案: