Question

我做错了什么？：|

 <div id=Content>
                    <h1>Welcome to the Sophia Centre press</h1>
                    <h2>New Publications Avaible Soon</h2>

                    <div id=Malta>
                    <img src ="images/Malta.jpg" alt="Malta" class="book">
                    <p>Tore Lomsdalen</p>
                    <p><em>Sky and Purpose in Prehistoric Malta: Sun, Moon, and Stars at the Temples of Mnajdra.</p></em>
                    </div>

                    <div id=Greene>
                    <img src="images/Greene.png" alt="Greene" class="book">
                    <p>Liz Greene</p>
                    <p><em>Magi and Maggidim: The Kabbalah in British Occultism 1860-1940.</em></p>
                    </div>
                    </div>

和css

＆＃13;

h1{
 
        padding: 1em;
}
h2{
        padding-left: 1cm;
        color: #FF9900;
}
 

p {
        clear: both;
        margin: 0% 0% 0% 20%;
}
 
 
.book{
float: left;
padding: 2em;
}

＆＃13;

看起来如何1）它应该如何看待2）

http://imgur.com/a/DqjnQ

我只想将文字移到内容中的图片旁边 HALP

Answer 1

您要找的是财产display: inline-block。

<img>代码自然是内联的，并且不需要设置，但由于您尝试内联<p>代码，因此您需要将其容器设置为display:inline-block解释它。

代码更改：

        <div id=Malta>
            <img src ="images/Malta.jpg" alt="Malta" class="book">
            <div class="textContainer">
                <p>Tore Lomsdalen</p>
                <p><em>Sky and Purpose in Prehistoric Malta: Sun, Moon, and Stars at the Temples of Mnajdra.</p></em>
            </div>
        </div>

CSS：

.textContainer {
    display: inline-block;
}

将文本放在图像css旁边，似乎不起作用

1 个答案: