css html简单逻辑问题_Html_Css

css html简单逻辑问题

html css

css html简单逻辑问题,html,css,Html,Css,如何在带有文字“Room 2”的p标签旁边获得带有文字“jon harris”的p标签我试过浮点数组合。。但是，我想是少了点什么下面是html代码： <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>Twitter Avatar Scrolling</title>

如何在带有文字“Room 2”的p标签旁边获得带有文字“jon harris”的p标签我试过浮点数组合。。但是，我想是少了点什么

下面是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>

你试过了吗

.event p{display:inline；}

在这两个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>

祝你好运

编辑，因为我看到了您在添加此内容后发布的图像。 再次编辑，因为您不需要额外的

清除：两者都有我错过了两个半决赛
注意，如果最终使用Span标记而不是p，则上述原则同样适用，但是Span将需要一个显示：块。
给您
只需将前两个
元素转换为内联元素。
不要使用的“段落”标记。-也可以使用文本，期望的外观是什么？有点像是在相邻的表格单元格中，字符串中的文本之间有间距，或者只是外观不同？如果是后者，那么@Rob所说的就可以了。否则我们可以做一些代码示例。我希望它看起来像这样：-我必须有不同的标记，因为我从at数据库获取数据并实现这些事件..所以每个div都会有不同的值，具有相同的p标记，spang标记..在两个“width:150px；”之后意外地省略了两个semi。在我看到你想做的事情之前，我还加了一句，把“clear:tware”去掉。如果你做了这些安瓿，它应该能工作，对我来说很好，我刚刚测试过。祝你好运。（我刚刚编辑了上面的代码（另外，如果您更改了Span's，请考虑我上面所说的，并将CSS更改为Span.class而不是p.class）.safari和firefox的哪个版本？在FF 3.5和4、Chrome 11、IE8和9以及Opera 11中看起来像。请尝试使用填充。事件p选择器。如果不起作用，请尝试边距。.event p{margin:0px；字体重量：bold；}我需要更改边距，感谢很多人！这个地方摇晃！=）那是为了狩猎而修好的吗？那是哪个版本，只是出于兴趣？
    <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>

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