Question

如何在带有文本“Room 2”的p-tag旁边找到带有文字“jon harris”的p-tag 我试过漂浮组合..但是有些东西丢失了......我猜。

这里是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>

这是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

围绕这两个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

.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;
}

祝你好运。

编辑，因为我在添加此内容后看到了您发布的图片。 再次修改，因为您不需要额外的clear: both;而我错过了2个半。

注意，如果您最终使用Span标签而不是P，则上述原则同样适用，但是，如果设置宽度等，则Span将需要display: block;。

Answer 2

你去...... http://jsfiddle.net/2N6tu/

您只需将前两个<p>元素转换为内联元素。

Answer 3

你试过吗

.event p{display:inline;}

css html简单的逻辑问题

3 个答案: