html - 在 HTML 中添加图像时，其他标签会相应调整

Question

我在 HTML 中添加一个图像，它是页面的标题。当我添加它时，它会与之后的其余内容重叠。我需要其余的内容相应地进行调整。不知道该怎么做。

我的代码如下所示：

HTML：

<div class="page_book"><div class="book_wrapper"><div class="book_content"> <!-- start description for page 1-->
                    <div class="title"><img src="img/soho_page1_image_0.png" alt="Introduction" width="30" height="50"></div>
                    <img src="pages/page_1.jpg" />
                    <p>This content.</p>

                    </p>
                </div></div></div><!-- end description for page 1-->
                <div class="meta">
                    <span class="num">1</span>
                </div>
                <div class="gradient"></div><div class="loader"></div>
            </div>

CSS：

.title
{
position:absolute;
left: 20px;
}

.page_book img {
    width: 70%;
    margin: 10px auto;
    display: block;
    cursor: pointer;
}

.page_book p {
    line-height: 20px;
}

我尝试删除 .title 类，但图像覆盖了整个宽度。

Answer 1

尝试：

.title
{
    position:relative;
    margin-left: 20px;
}

另外，使用

.title img{
    margin:0px;
    width:auto;
}

图像当前继承了的样式，.page_book img这就是造成所有混乱的原因..

下次在问题中添加 jsFiddle 会有所帮助