Плавающее поле с содержимым в виде текста и изображения [css] - PullRequest
0 голосов
/ 15 марта 2011

Я знаю, что это, вероятно, простой вопрос, но мой разум просто не работает сегодня утром! По сути, у меня есть поле с содержимым (например, поле содержимого / краткий обзор), и я хочу добавить в него какой-то текст, как вы бы добавили изображение. Прямо сейчас следующий CSS делает это:

picture of what's happening

Как бы вы исправили это?

CSS

#content #info_box {
  width: 230px;
  float: left;
  margin-right: 10px;
  margin-right: 0;
  background: #efefef;
}
#content #info_box #content {
  width: 210px;
  margin: 7px 10px;
}
#content #info_box #content ul {
  list-style-type: none;
  padding: 0px;
  margin: 3px 0px 10px 0px;
}
#content #info_box #content ul li {
  background-image: url(/images/arrow_bullet.png);
  background-repeat: no-repeat;
  background-position: 0px 5px;
  padding-left: 14px;
}
#content #info_box #content #dates { font-size: 14px; }

HTML

    <p>Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu.</p>
<div id="info_box">
    <div id="content">
        <b>Job at a glance</b>
        <br>
        <ul>
            <li>This job is an internship</li>
            <li>It pays $7 per hour</li>
            <li>You'll be working 3 hour shifts</li>
        </ul>
        You'll be scheduled to work on:<br>
        <span id="dates">S <b>M</b> <b>T</b> <b>W</b> <b>T</b> <b>F</b> S</span>
    </div>
</div>

Ответы [ 3 ]

1 голос
/ 15 марта 2011

Это то, что вам нужно:

http://jsfiddle.net/Mutant_Tractor/qfzJ2/1/

У вас было дополнительное #content в начале всех ваших классов

1 голос
/ 15 марта 2011

просто введите float:right в * # info_box *. Почему вы написали margin-left в * # info_box * два раза?

0 голосов
/ 15 марта 2011

Как я понимаю, вы хотите поместить #info_box справа от p, так задайте фиксированную ширину для p и поместите ее влево и поместите #info_box вправо.

...