css html简单的逻辑问题

Question

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. 如何在带有文本“Room 2”的p-tag旁边找到带有“jon harris”文本的p-tag我尝试了浮动组合..但是有些东西丢失了......我猜。

here the html code: 这里的HTML代码：

<!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: 这是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;
}  
.event 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;
}

Answer 1

Create a wrapper around those two P tags, set the width of those two P tags and add float: left to both eg: 在这两个P标签周围创建一个包装器，设置这两个P标签的宽度并将float：left添加到两个例如：

    <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 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; 再次编辑 ，因为你不需要额外的clear: both; and I missed off 2 semi's. 我错过了2个半。

Note , if you end up using Span tags instead of P the same above principle applies, however, the Span will require a display: block; 注意，如果最终使用Span标签而不是P，则上述原则同样适用，但是Span需要display: block; on them if setting widths etc. 如果设置宽度等，在他们身上

Answer 2

Here you go ... http://jsfiddle.net/2N6tu/ 在这里你去... http://jsfiddle.net/2N6tu/

You just need to turn the first two <p> elements to inline elements. 您只需将前两个<p>元素转换为内联元素即可。

Answer 3

你有没有尝试过

.event p{display:inline;}

css html简单的逻辑问题

问题描述

3 个解决方案

解决方案1
1 2011-05-06 23:18:09

解决方案2
1 已采纳 2011-05-07 00:39:46

解决方案3
0 2011-05-06 22:23:48

css html简单的逻辑问题

问题描述

3 个解决方案

解决方案1 1 2011-05-06 23:18:09

解决方案2 1 已采纳 2011-05-07 00:39:46

解决方案3 0 2011-05-06 22:23:48

解决方案1
1 2011-05-06 23:18:09

解决方案2
1 已采纳 2011-05-07 00:39:46

解决方案3
0 2011-05-06 22:23:48