простая логическая задача css html

ProgramBox

простая логическая задача css html

Post author:admin
Запись опубликована:5 мая, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Как мне получить p-тег с текстом «джон Харрис» рядом с p-тегом с текстом «Комната 2» Я пробовал комбинации с плавающей запятой.. но чего-то не хватает .. я думаю.

здесь 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;
}

1. Не используйте тег <p> ‘paragraph’ . — с таким же успехом можно использовать <span class=’CSS_class’> Text</span>

2. Каков желаемый внешний вид? Вроде как они были в ячейках таблицы рядом друг с другом с интервалом между ними или просто по-разному выглядящий текст в строке? Если это последнее, то то, что сказал @Rob, было бы прекрасно. В противном случае мы можем привести несколько примеров кода.

3. Я хочу, чтобы это выглядело так: imm.io/5tzg — У меня должны быть разные теги, потому что я извлекаю данные из базы данных at и внедряю их events..so каждый div будет иметь разные значения с одним и тем же p-тегом, spang-тегами..

Ответ №1:

Вот так… http://jsfiddle.net/2N6tu /

Вам просто нужно превратить первые два <p> элемента в встроенные элементы.

1. Какая версия safari и Firefox? Это выглядит как imm.io/5u2v в FF 3.5 и 4, Chrome 11, IE8 и 9 и Opera 11

2. Попробуйте поиграть с padding для .event p селектора. Если это не сработает, попробуйте margin.

3. .событие p { margin: 0px; font-weight: жирный шрифт; }

4. Мне нужно изменить поле, большое спасибо, ребята! это место потрясающее! =)

5. это исправило проблему для safari? Какая это была версия, просто из интереса?

Ответ №2:

Создайте оболочку вокруг этих двух тегов 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; .

1. Случайно пропустил две точки с запятой после двух «width: 150px;». Также удалите «очистить: оба;», поскольку я добавил это до того, как увидел изображение того, что вы пытались сделать. Если вы внесете эти исправления, это должно сработать, у меня все работает нормально, я только что протестировал. Желаю удачи. (Я только что отредактировал приведенный выше код (также, если вы измените на Span, примите во внимание то, что я сказал выше, плюс измените этот CSS на span.class вместо p.class ).

Ответ №3:

вы пробовали

 .event p{display:inline;}