Как правильно перемещать изображение и текст с помощью CSS - PullRequest
Новая
       3

Как правильно перемещать изображение и текст с помощью CSS

0 голосов
/ 05 декабря 2010

Мне нужен формат HTML с использованием CSS, чтобы я получил следующее:

Изображение слева, с объектом и телом рядом с ним справа.Я хочу, чтобы субъект находился на одной линии, а тело - на другой.С одним сообщением за другим на последующих блокировках вниз страницы.

Однако я получаю тему и тело одной строкой и каскадный эффект вниз по странице.

Здесьэто то, что я, кажется, получаю.

alt text Я просто не могу понять, что нужно.

Мой HTML-код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>messages to/from someone</title>
<link rel="stylesheet" type="text/css" href="messages.css" />
</head><body>
         <div class'message'>
               <span class='to'>
                     <img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
                     <span class='subject'>subject</span>
                     <span class='body'>body</span>
               </span>
         </div>  
         <div class'message'>
               <span class='to'>
                     <img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
                     <span class='subject'>subject</span>
                     <span class='body'>body</span>
               </span>
         </div>  
         <div class'message'>
               <span class='to'>
                     <img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
                     <span class='subject'>subject</span>
                     <span class='body'>body</span>
               </span>
         </div>  
</body></html>

Мой CSSis: 

.floatimgleft {
    float:left;
    margin-top:10px;
    margin-right:10px;
    margin-bottom:10px;
}
.message{
  display: block;
}

.subject {
   display: inline;
}
.body {
   display: inline;
}

Edit: я отредактировал код, чтобы показать, откуда я начал.У меня сложилось впечатление, что div class = 'message' приведет к разрыву строки между сообщениями, но я получаю каскадный эффект.

Ответы [ 2 ]

1 голос
/ 05 декабря 2010

Для макета, который вы искали, я, вероятно, выбрал бы что-то более похожее на:

Index.html: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>messages to/from someone</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <ul id="messages">
        <li>
            <div>
                <span class="icon"></span>
                <h2>Subject</h2>
                <p>Body.. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
            </div>
        </li>
        <li>
            <div>
                <span class="icon"></span>
                <h2>Subject</h2>
                <p>Body.. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
            </div>
        </li>
    </ul>
</body>
</html>

Style.css: 

h2, p { clear: none; padding: 0px; margin: 0px; }
ul#messages { text-align: left; }
ul#messages li { margin-bottom: 25px; }
ul#messages li > div > span.icon { float: left; display: block; width: 64px; height: 64px; border: 1px solid #111; /* border added to demonstrate */ background-image: url('../code/images/arrow-right.png'); }

Демонстрируется в: http://jsfiddle.net/j7KHg/2/

1 голос
/ 05 декабря 2010

Добавить: 

class="floatimgleft"

на ваши img теги: 

<img src='../code/images/arrow-right.png' width='64' height='64' border='0' class="floatimgleft" />

Кроме того, похоже, вы не используете класс to, и вам не хватает = в <div class'message'>.

Вот jsfiddle, чтобы проверить это:

РЕДАКТИРОВАТЬ: для ясности, добавьте clear: left к сообщению. Смотрите скрипку:

для демонстрации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...