css html simple logic problem_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-04 12:19 出处：网络

How do I get the p-tag with text \"jon harris\" beside the p-tag with text \"Room 2\" I have tried float-combinations.. but there is something missing..i guess.

相关专题：css

How do I get the p-tag with text "jon harris" beside the p-tag with text "Room 2" I have tried float-combinations.. but there is something missing..i guess.

here the html code:

<!DOCTYPE HTML>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Twitter Avatar Scrolling</title>  
        <link rel="stylesheet" href="css/events.css" />  
    </head>  
    <body>  
        <div class="event">
            <img src="images/red.jpg" alt="picture" />  
            <p>Room 2</p>
            <p class="patient-name">Jon Harris</p>
            <p class="event-text">This is a pixel. A flying pixel!</p>
            <p class="event-timestamp">feb 2 2011 - 23:01</p>
        </div>
    </body>  
</html>

here is the css:

body {  
    font:13px/1.5 "helvetica neue", helvetica, arial, san-serif;  
}  
.event {  
    display:block;  
    background: #ececec;  
    width:380px;  
    padding:10px;  
    margin:10px;  
    overflow:hidden;  
    text-align: left;
}  
.eve开发者_开发问答nt img {  
    float:left;  
}  
.event p {  
    margin:0;  
    padding-left:60px;
    font-weight: bold;
}

.patient-name {
    color: #999999;
    font-size: 9px;
    padding-left: 5px;
}
.event-text{
    color: #999999;
    font-size: 12px;
    padding-left: 5px;
}
.event-timestamp{
    color: #000;
    padding-left: 5px;
    font-size: 9px;
}

Here you go ... http://jsfiddle.net/2N6tu/

You just need to turn the first two <p> elements to inline elements.

Create a wrapper around those two P tags, set the width of those two P tags and add float: left to both e.g:

    <div class="event">
        <img src="images/red.jpg" alt="picture" />
        <div class="event-wrapper">
            <div class="event-inner-wrap">
                 <p class="room-number">Room 2</p>
                 <p class="patient-name">Jon Harris</p>
            </div>
            <div class="clear"></div>
            <p class="event-text">This is a pixel. A flying pixel!</p>
            <p class="event-timestamp">feb 2 2011 - 23:01</p>
        </div>
    </div>

css

.clear {
    clear: both;
}

.event-wrapper {
    width: 300px; /*** assuming that image is 80px, i didn't measure ***/
    float: left;
}

.event-inner-wrap {
    width: 300px; /*** assuming that image is 80px, i didn't measure ***/
}

p.room-number {
    width: 150px; /** set as whatever you like, just make sure this width plus the width of the patient name is no bigger than the wrapper width **/
    float: left;
}


p.patient-name {
    width: 150px; /** set as whatever you like, just make sure this width plus the width of the room number is no bigger than the wrapper width **/
    float: left;
}

Good luck.

Edit, because I saw that image you posted after I added this. Edit again, because you don't need the extra clear: both; and I missed off 2 semi's.

Note, if you end up using Span tags instead of P the same above principle applies, however, the Span will require a display: block; on them if setting widths etc.

have you tried