开发者

how to display img with p, h3 in one line inside the div?

开发者 https://www.devze.com 2023-02-11 14:16 出处:网络
开发者_如何学JAVAHey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? ThanksLike this?
开发者_如何学JAVA

Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks


Like this?

Live Demo

This has an advantage (depending on what you want) over the other answers posted so far - if the height of the text content is greater than the image, the text will stay flush (won't wrap around the image).

CSS:

#content {
    margin-left: 210px
}
#theDiv img {
    float: left
}

HTML:

<div id="theDiv">

    <img src="http://dummyimage.com/200x300/f0f/fff" />

    <div id="content">
        <h3>how to display img with p, h3 in one line inside the div?</h3>
        <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p>
        <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p>
        <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p>
        <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p>
        <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p>
        <p>Hey, i need to display the image on the left side of the div, h3 and p on the rifgt side of the div next to img. Can anyone tell me the answer in css and html? Thanks</p>
    </div>

</div>


Just float the image left:

img {
    float: left;
}

http://jsfiddle.net/lukemartin/EZ4pT/


make your image floating :

<div>
    <img src="http://www.google.com/intl/en_com/images/srpr/logo1w.png" 
         style="float: left" />
    <h3>
        Nemo nemo et habitus) ad oritur ab disputatio cuius ab.</h3>
    <p>
        Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica
        versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut
        omittam, quam graves, quam difficiles plerisque videntur calamitatum societates!
        Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.</p>
    <p>
        Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium
        nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna
        quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur
        et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos
        sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.</p>
    <p>
        Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste.
        Ptolomaeo enim rege foederato nobis et socio ob aerarii nostri angustias iusso sine
        ulla culpa proscribi ideoque hausto veneno voluntaria morte deleto et tributaria
        facta est et velut hostiles eius exuviae classi inpositae in urbem advectae sunt
        per Catonem, nunc repetetur ordo gestorum.</p>
</div>
0

精彩评论

暂无评论...
验证码 换一张
取 消