Html как написать текст справа от картинки - Правописание и грамматика

I’m trying to set up separate sections within the body that would show info in them like this

using float: left; doesn’t help, it only messes up the page layout.

here’s my html…

#a,
#g {
  background-color: #6d6d6d;
  color: #bdc3c7;
  list-style: none;
}

#pic {
  margin: +5% 0 0;
  border: 3px solid black;
}

#wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  list-style: none;
}

<div Id="wrapper">
  <section>
    <ul id="a">
      <li>
        <a href="img/appstore.jpg">
          <img src="img/appstore.jpg" alt="" width=180px id="pic">
          <p>info</p>
        </a>
      </li>
    </ul>
  </section>

  <section>
    <ul id="g">
      <li>
        <a href="img/googleplay.jpg">
          <img src="img/googleplay.jpg" alt="" width=180px id="pic">
          <p>info</p>
        </a>
      </li>
    </ul>
  </section>
</div>

cloned

6,1704 gold badges26 silver badges38 bronze badges

asked May 29, 2016 at 2:05

Why are you using the same name for multiple instances of the same id for your images? ID’s are supposed to be unique, you’re better of using a class if you’re going to group. Check my solution out for your question:

#a, #g {
    color: #bdc3c7;
    list-style: none;
}

.pic {
    margin:+5% 0 0;
    border: 3px solid black;
    float:left;
}

.sections {
  height:100px;
  background-color: #6d6d6d;
}

.info {
  margin:+5% 10px;
  float:left;
}

#wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  list-style: none;
}

   <div Id="wrapper">
      <section class="sections">
          <ul id="a">
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px class="pic">
                <p class="info">info</p>
              </a>
            </li>
          </ul>
        </section>

        <section class="sections">
         <ul id="g">
            <li>
              <a href="img/googleplay.jpg">
                <img src="img/googleplay.jpg" alt="" width=180px class="pic">
                <p class="info">info</p>
              </a>
            </li>
          </ul>   
        </section>
    </div>

I classed the section tags as that’s what you would need to add the background colour to and set a height. You would need to set a height as the items are floating so they would not stretch the section automatically, so you need to provide a fixed height.
I added classes to your paragraphs as these would also need to be floated left as well as your images. Also you needed to add the same margins as your images.
I changed your pics ID’s to classes.

If you have any questions, let me know.

answered May 29, 2016 at 2:58

change id=»pic» to class=»pic». because ID should be used 1 time in a page..

then write in css:

.pic {
float: left;
}

answered May 29, 2016 at 5:42

Try using float:right

#wrapper ul {
    padding: 0;
    margin: auto;
    width: 80%;
    list-style-type: none;
}

#wrapper ul li {
    background-color: #6d6d6d;
    padding: 30px;
    margin-bottom: 20px;
    display: table;
    width: 100%;
}

#wrapper ul li img {
    float: left;
}

#wrapper ul li .details {float: right;width: 75%;}

    <div Id="wrapper">
      <section>
          <ul id="a">
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
          </ul>
        </section>
    </div>

answered May 29, 2016 at 2:12

keziahkeziah

5561 gold badge6 silver badges24 bronze badges

I changed your code and list things a bit.. Tell me if i misinterpreted your question..

        <html>
        <head>
          <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
          <style>
                #a, #g {
                    background-color: #6d6d6d;
                    color: #bdc3c7;
                    list-style: none;
                    width: 100%;
                }
        
                #pic {
                    margin: +5% 0 0;
                    border: 3px solid black;
                    display:table-cell; width:100px;height:100px;
                }
        
                #wrapper {
                  max-width: 1200px;
                  margin: 0 auto;
                  padding: 0 5%;
                  list-style: none;
                }
                section{
                    width: 100%;
                }
        
          </style>
        </head>
        <body>
            <div Id="wrapper">
              <section>
                      <a href="img/appstore.jpg" id="a">
                        <div style="display:table" id="g">
                            <div style="" id="pic">
                                <img src="img/appstore.jpg" width=180px alt="">
                            </div>
                            <div style="padding:12 16;">
                                <p>info</p>
                            </div>
                        </div>      
                      </a>
        
                </section>
        
                <section>
                    <a href="img/googleplay.jpg">
                        <div style="display:table" id="g">
                            <div style="" id="pic">
                                <img src="img/googleplay.jpg" alt="" width=180px>
                            </div>
                            <div style="padding:12 16;">
                                <p>info</p>
                            </div>
                        </div>      
                    </a>
                </section>
            </div>
        </body>
    </html>

answered May 29, 2016 at 5:55

Tirthraj BarotTirthraj Barot

2,6712 gold badges17 silver badges33 bronze badges

Источник

I’m trying to set up separate sections within the body that would show info in them like this

using float: left; doesn’t help, it only messes up the page layout.

here’s my html…

#a,
#g {
  background-color: #6d6d6d;
  color: #bdc3c7;
  list-style: none;
}

#pic {
  margin: +5% 0 0;
  border: 3px solid black;
}

#wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  list-style: none;
}

<div Id="wrapper">
  <section>
    <ul id="a">
      <li>
        <a href="img/appstore.jpg">
          <img src="img/appstore.jpg" alt="" width=180px id="pic">
          <p>info</p>
        </a>
      </li>
    </ul>
  </section>

  <section>
    <ul id="g">
      <li>
        <a href="img/googleplay.jpg">
          <img src="img/googleplay.jpg" alt="" width=180px id="pic">
          <p>info</p>
        </a>
      </li>
    </ul>
  </section>
</div>

cloned

6,1704 gold badges26 silver badges38 bronze badges

asked May 29, 2016 at 2:05

#a, #g {
    color: #bdc3c7;
    list-style: none;
}

.pic {
    margin:+5% 0 0;
    border: 3px solid black;
    float:left;
}

.sections {
  height:100px;
  background-color: #6d6d6d;
}

.info {
  margin:+5% 10px;
  float:left;
}

#wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  list-style: none;
}

   <div Id="wrapper">
      <section class="sections">
          <ul id="a">
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px class="pic">
                <p class="info">info</p>
              </a>
            </li>
          </ul>
        </section>

        <section class="sections">
         <ul id="g">
            <li>
              <a href="img/googleplay.jpg">
                <img src="img/googleplay.jpg" alt="" width=180px class="pic">
                <p class="info">info</p>
              </a>
            </li>
          </ul>   
        </section>
    </div>

I classed the section tags as that’s what you would need to add the background colour to and set a height. You would need to set a height as the items are floating so they would not stretch the section automatically, so you need to provide a fixed height.
I added classes to your paragraphs as these would also need to be floated left as well as your images. Also you needed to add the same margins as your images.
I changed your pics ID’s to classes.

If you have any questions, let me know.

answered May 29, 2016 at 2:58

change id=»pic» to class=»pic». because ID should be used 1 time in a page..

then write in css:

.pic {
float: left;
}

answered May 29, 2016 at 5:42

Try using float:right

#wrapper ul {
    padding: 0;
    margin: auto;
    width: 80%;
    list-style-type: none;
}

#wrapper ul li {
    background-color: #6d6d6d;
    padding: 30px;
    margin-bottom: 20px;
    display: table;
    width: 100%;
}

#wrapper ul li img {
    float: left;
}

#wrapper ul li .details {float: right;width: 75%;}

    <div Id="wrapper">
      <section>
          <ul id="a">
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <!-- Wrapped into div -->
                <div class="details">
                    <p>info</p>
                </div>
              </a>
            </li>
          </ul>
        </section>
    </div>

answered May 29, 2016 at 2:12

keziahkeziah

5561 gold badge6 silver badges24 bronze badges

I changed your code and list things a bit.. Tell me if i misinterpreted your question..

        <html>
        <head>
          <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
          <style>
                #a, #g {
                    background-color: #6d6d6d;
                    color: #bdc3c7;
                    list-style: none;
                    width: 100%;
                }
        
                #pic {
                    margin: +5% 0 0;
                    border: 3px solid black;
                    display:table-cell; width:100px;height:100px;
                }
        
                #wrapper {
                  max-width: 1200px;
                  margin: 0 auto;
                  padding: 0 5%;
                  list-style: none;
                }
                section{
                    width: 100%;
                }
        
          </style>
        </head>
        <body>
            <div Id="wrapper">
              <section>
                      <a href="img/appstore.jpg" id="a">
                        <div style="display:table" id="g">
                            <div style="" id="pic">
                                <img src="img/appstore.jpg" width=180px alt="">
                            </div>
                            <div style="padding:12 16;">
                                <p>info</p>
                            </div>
                        </div>      
                      </a>
        
                </section>
        
                <section>
                    <a href="img/googleplay.jpg">
                        <div style="display:table" id="g">
                            <div style="" id="pic">
                                <img src="img/googleplay.jpg" alt="" width=180px>
                            </div>
                            <div style="padding:12 16;">
                                <p>info</p>
                            </div>
                        </div>      
                    </a>
                </section>
            </div>
        </body>
    </html>

answered May 29, 2016 at 5:55

Tirthraj BarotTirthraj Barot

2,6712 gold badges17 silver badges33 bronze badges

Источник

Как сделать, чтобы текст был справа от картинки на экранах <768px?

html код:

<div id="content">
    <div class="container">
        <div class="row">
            <a href=""><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="images/11.jpg" alt="">
            <p>The Arecaceae are a botanical family of perennial climbers, shrubs, acaules and trees commonly known as palm trees</p></div></a>
            <a href=""><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="images/22.jpg" alt="">
            <p>Palms are among the best known and most extensively cultivated plant families. They have been important to humans throughout much of history.</p></div></a>
            <a href=""><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="images/33.jpg" alt="">
            <p>Many common products and foods are derived from palms, and palms are also widely used in landscaping, making them one of the most economically important plants.</p></div></a>
            <a href=""><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="images/44.jpg" alt="">
            <p>In many historical cultures, palms were symbols for such ideas as victory, peace, and fertility. For inhabitants of cooler climates today, palms symbolize the tropics and vacations.</p></div></a>
            <a href=""><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="images/55.jpg" alt="">
            <p>Whether as shrubs, trees, or vines, palms have two methods of growth: solitary or clustered. The common representation is that of a solitary shoot ending in a crown of leaves.</p></div></a>
            <a href=""><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="images/66.jpg" alt="">
            <p>Most palms grow in the tropics and subtropics. They are abundant throughout the tropics and subtropics, and thrive in almost every habitat they are in. Their diversity is highest in wet, lowland forests, especially in ecological "hotspots" such as Madagascar, which has more endemic palms than all of Africa.</p></div></a>
            <a href=""><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="images/77.jpg" alt="">
            <p>Subfamily Calamoideae includes the climbing palms, such as rattans. The leaves are usually pinnate; derived characters (synapomorphies) include spines on various organs, organs specialized for climbing, an extension of the main stem of the leaf-bearing reflexed spines, and overlapping scales covering the fruit and ovary.</p></div></a>
            <a href=""><div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"><img class="img-responsive" src="images/88.jpg" alt="">
            <p>This monopodial character may be exhibited by prostrate, trunkless, and trunk-forming members.</p></div></a>
        </div>
    </div>
</div>

Источник

Как сделать чтобы картинка была слева, а текст был справа от картинки?

Как сделать чтобы картинка была слева, а текст справа?

Вопрос задан

более трёх лет назад
13780 просмотров

картинке дайте float:left

задать контейнеру display: flex

Пригласить эксперта

Если без css, то так)

<p><img src="images/sample.gif" width="100" height="200" alt="Иллюстрация" align="left" vspace="5" hspace="5">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.</p>

Показать ещё
Загружается…

03 мар. 2023, в 19:35

3000 руб./за проект

03 мар. 2023, в 18:19

3000 руб./в час

03 мар. 2023, в 18:02

3000 руб./за проект

Минуточку внимания

Источник

Иллюстрации всегда использовались для наглядного донесения до читателя нужной
информации, для оформления страниц сайта и включения в текст различных графиков,
диаграмм и схем. В общем, область применения изображений на сайтах достаточно
велика. При этом используется несколько способов добавления рисунков в текст
веб-страницы, которые и рассмотрены далее.

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег <img>
помещается в контейнер <p>, для которого устанавливается
атрибут align=»center». Но если предполагается
активное использование иллюстраций, то лучше создать новый стилевой класс, назовем
его fig, и применим его для нужных абзацев, как
показано в примере 1.

Пример 1. Выравнивание рисунка по центру

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок по центру</title>
  <style type="text/css">
   P.fig {
    text-align: center; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body> 
  <p class="fig">
   <img src="images/sample.gif" width="200" height="100" alt="Иллюстрация">
  </p>
 </body>
</html>

В данном примере класс fig добавляется к селектору
P, а способ выравнивания определяется свойством text-align.
Положение рисунка относительно текста схематично показано на рис. 1.

Рис. 1. Рисунок в центре колонки текста

Обтекание рисунка текстом

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц,
когда изображение располагается по краю окна браузера, а текст обходит его с
других сторон (рис. 2). Для создания обтекания изображения текстом существует
несколько способов, связанных, как с возможностью тегов HTML, так и с применением
стилей.

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Так, у тега <img> есть атрибут align,
который определяет выравнивание изображения. Этот атрибут задает, возле какого
края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания
текста. Чтобы выровнять изображение по правому краю и задать обтекание слева,
используют значение right, для выравнивания по
левому краю применяют left. Атрибут align
часто используют в связке с другими атрибутами тега <img> —
vspace и hspace. Они
определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов
изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега <img>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок в тексте</title>
 </head>
 <body> 
  <p><img src="images/sample.gif" width="100" height="200" 
  alt="Иллюстрация" align="left" 
  vspace="5" hspace="5">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.</p> 
 </body>
</html>

Горизонтальный отступ от картинки до текста управляется атрибутом hspace,
он добавляет пустое пространство одновременно слева и справа от изображения.
Поэтому в данном примере рисунок не прилегает к краю окна, а отстоит от него
на величину, указанную значением hspace.

Для обтекания картинки текстом также можно применить стилевое свойство float.
Значение right будет выравнивать изображение по
правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3).
Значение left, наоборот, выравнивает изображение
по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок в тексте</title>
  <style type="text/css">
   IMG.fig {
    float: right; /* Обтекание картинки по левому краю */
    padding-left: 10px; /* Отступ слева */
    padding-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head>
 <body> 
  <p><img src="images/sample.gif" width="100" height="200" 
  alt="Иллюстрация" class="fig">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.</p> 
 </body>
</html>

В данном примере к тегу <img> добавляется класс
fig, для которого установлено выравнивание по правому
краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно
к изображению, применяются свойства padding-left
и padding-bottom.

Рисунок на поле

При такой схеме изображение располагается справа или слева от текста, причем
его обтекание происходит только с одной стороны. Фактически это напоминает две
колонки, в одной из них находится рисунок, а в другой текст (рис. 3).

Рис. 3. Изображение размещается на поле слева от текста

Существует несколько методов достижения подобного результата. Рассмотрим два
из них — использование таблицы и применение стилевого свойства margin.

Применение таблиц

Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью
ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение,
во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также
обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью
атрибута width тега <td>.
В примере 4 показано создание указанной таблицы.

Пример 4. Создание рисунка на поле с помощью таблиц

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок на поле</title>
  <style type="text/css">
   TD.leftcol {
    width: 110px; /* Ширина левой колонки с рисунком */
    vertical-align: top; /* Выравнивание по верхнему краю */
   }
  </style>
 </head>
 <body>
  <table width="100%" cellspacing="0" cellpadding="0">
   <tr> 
    <td class="leftcol"><img src="images/igels.png" 
    width="90" height="78" alt="Вы не поверите, но это 
    ёжик"></td>
    <td valign="top">Ёжики защищены от внешней агрессии колючим 
    панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом 
    ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это 
    хищник. Да, он не питается волками и лисами, но только потому, что уступает 
    им в размерах. А вот закусить червячком или даже змеей ему вполне под силу.</td>
   </tr>
  </table>
 </body>
</html>

Результат примера показан на рис. 4.

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где
он располагается — 110 пикселов. Разница между ними и обеспечивает нужное
расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing
и cellpadding не вмешивались в процесс, их значения
лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.

Использование стилей

В данном случае потребуется два слоя, параметры которых будем изменять через
CSS. Изображение поместим в слой с именем pic, а текст, сильно не мудрствуя,
в слой text. Теперь для слоя piс следует установить свойство float
со значением left, а для text — margin-left.
Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста
(пример 5).

Пример 5. Использование margin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок на поле</title>
  <style type="text/css">
   #pic {
    float: left; /* Обтекание картинки текстом */
   }
   #text {
    margin-left: 110px; /* Отступ от левого края */
   }
  </style>
 </head>
 <body> 
  <div id="pic">
   <img src="images/igels.png" width="90" height="78" 
   alt="Вы не поверите, но это ёжик">
  </div>
  <div id="text">
   Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, 
   кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное 
   и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, 
   но только потому, что уступает им в размерах. А вот закусить червячком или даже 
   змеей ему вполне под силу.
  </div>
 </body>
</html>

Свойство float в данном примере нужно, чтобы верхний
край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.

Если рисунок следует расположить справа от текста, то значение float
меняем на right, а свойство margin-left
на margin-right.

Источник

Изображения в тексте

Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц сайта и включения в текст различных графиков, диаграмм и схем. В общем, область применения изображений на сайтах достаточно велика. При этом используется несколько способов добавления рисунков в текст веб-страницы, которые и рассмотрены далее.

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег <img> помещается в контейнер <p> , для которого устанавливается атрибут align=»center» . Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig , и применим его для нужных абзацев, как показано в примере 1.

Пример 1. Выравнивание рисунка по центру

В данном примере класс fig добавляется к селектору P , а способ выравнивания определяется свойством text-align . Положение рисунка относительно текста схематично показано на рис. 1.

Рис. 1. Рисунок в центре колонки текста

Обтекание рисунка текстом

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Так, у тега <img> есть атрибут align , который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right , для выравнивания по левому краю применяют left . Атрибут align часто используют в связке с другими атрибутами тега <img> — vspace и hspace . Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега <img>

Горизонтальный отступ от картинки до текста управляется атрибутом hspace , он добавляет пустое пространство одновременно слева и справа от изображения. Поэтому в данном примере рисунок не прилегает к краю окна, а отстоит от него на величину, указанную значением hspace .

Для обтекания картинки текстом также можно применить стилевое свойство float . Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left , наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

В данном примере к тегу <img> добавляется класс fig , для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom .

Рисунок на поле

При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).

Рис. 3. Изображение размещается на поле слева от текста

Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin .

Применение таблиц

Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега <td> . В примере 4 показано создание указанной таблицы.

Пример 4. Создание рисунка на поле с помощью таблиц

Результат примера показан на рис. 4.

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.

Использование стилей

В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic , а текст, сильно не мудрствуя, в слой text . Теперь для слоя piс следует установить свойство float со значением left , а для text — margin-left . Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).

Пример 5. Использование margin

Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.

Если рисунок следует расположить справа от текста, то значение float меняем на right , а свойство margin-left на margin-right .

Как сделать, чтобы текст был справа от картинки?

Как сделать, чтобы текст был справа от картинки на экранах <768px?

Первый вариант. Надо положить картинку и текст в один блок 1, картинке задать, например, float:left . Потом еще надо создать пустой блок 2 внутри блока 1 (или clearfix — ::after ), задать блоку 2 свойство clear:left .
Второй вариант. Положить картинку и текст в один блок 1, блоку 1 задать position:relative , картинке задать position:absolute; top:0px; left:0px; ,текст положить в параграф, параграфу задать margin-left , равный ширине картинки

Лучше всего всё переписать под нормальную блочную верстку с css display «table» :

А то блоки и параграфы в ссылке. включайте музыку поспокойнее когда программируете 🙂

Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:

Ранее я рассказывал о том, как вставить картинку в HTML-страницу. Если кто пропустил, то см. эту статью здесь.

Сегодня продолжу рассказывать о картинках — рассмотрим ещё некоторые полезные атрибуты тега <img> , а также “фишки” использования рисунков.

Обтекание рисунка текстом в HTML

Если большие картинки обычно вставляются между абзацами, то маленькие чаще вставляются в текст, то есть текст обтекает картинку. Однако если в HTML не принять дополнительных мер, то картинка будет вставлена в текст просто как “буква”, и текст будет продолжаться после картинки одной строкой. Соответственно, если рисунок имеет размер более одной строки, то между строками получится большое пустое пространство, что не очень красиво:

Для выравнивания картинки в тексте в теге <img> можно применить атрибут align . Выравнивание как раз и позволяет добиться обтекания картинки текстом.

Стандарты HTML определяют пять значений для атрибута align :

left — выравнивание по левому краю
right — выравнивание по правому краю
top — выравнивание по верхнему краю
bottom — выравнивание по нижнему краю (это значение по умолчанию)
middle — выравнивание по середине

Если вы не используете атрибут align , то выполняется выравнивание картинки по нижнему краю (как на рисунке выше).

Некоторые браузеры могут поддерживать и другие значения, но мы о них говорить не будем, поскольку это уже за рамками стандарта.

Итак, если вы хотите, чтобы текст обтекал картинку справа, то значение атрибута align должно быть равно left . Это немного странно, если думать о выравнивании текста. Но мы то выравниваем не текст, а картинку. Поэтому всё правильно — картинка будет слева, а текст — справа.

Пример выравнивания картинки по левому краю (обтекание текстом справа):

А вот так примерно это будет выглядеть в браузере:

Рамка вокруг рисунка в HTML

Вообще этим пользуются редко, но иногда всё-же необходимо сделать рамку вокруг рисунка. Для этого можно использовать атрибут border . Делается это примерно так:

Здесь мы обводим рисунок рамкой шириной 5 пикселей. По умолчанию цвет рамки будет чёрным. К сожалению, я не знаю простых способов изменить цвет рамки только средствами HTML, а в CSS и прочие прелести я погружаться не буду, так как мой рассказ про HTML.

Некоторые браузеры могут обводить рисунок рамкой по умолчанию, если атрибут border не указан. Поэтому, чтобы быть уверенным в том, что рамки вокруг рисунка не будет, лучше всегда использовать атрибут border с нулевым значением.

Атрибуты hspace и vspace

Итак, выравнивание рисунка в HTML теперь для вас сложности не представляет. Однако есть один неприятный вопрос — текст слишком близко прижат к картинке. Это не очень красиво смотрится.

Как же сделать отступы между текстом и картинкой? Для этого есть атрибуты hspace и vspace , которые задают отступы от горизонтального (справа и слева) и вертикального (сверху и снизу) края картинки соответственно. Пример:

В этом примере мы задаём отступы слева и справа по 50 пикселей, а сверху и снизу — по 10 пикселей. А в браузере это будет выглядеть примерно так:

Картинка в заголовке HTML

Иногда требуется вставить картинку в заголовок. Сделать это несложно. Например:

<h2><img src=»https://info-master.su/programming/web/html/warning.png» alt=». «> Очень важно</h2>

А выглядеть это будет примерно так:

И вообще картинки можно вставлять куда угодно — в таблицы, в списки и т.п.

О картинках много ещё чего можно рассказать. И я как-нибудь вернусь к этому вопросу. Но на сегодня всё.

А если хотите знать больше и прямо сейчас, то изучите курс о вёрстке сайтов.

Источник

Раздел:
Сайтостроение /
HTML /

План заработка в Интернете

Как правильно выбрать партнерские программы, чтобы гарантированно зарабатывать? Что необходимо сделать вначале, чтобы ваш заработок был стабильным и предсказуемым? Возможно ли стартовать вообще без денег и каких-либо вложений в рекламу? Этот план поможет вам сделать первые шаги к заработку, даст ответы на важные вопросы и убережет от ошибок в начале пути.
Подробнее…

>>> Вёрстка сайта с нуля 2.0 >>>

Ранее я рассказывал о том, как вставить картинку в HTML-страницу. Если кто
пропустил, то см. эту статью здесь.

Сегодня продолжу рассказывать о картинках — рассмотрим ещё некоторые
полезные атрибуты тега <img>, а также “фишки” использования рисунков.

Обтекание рисунка текстом в HTML

Для выравнивания картинки в тексте в теге <img> можно
применить атрибут align. Выравнивание как раз и позволяет добиться обтекания картинки текстом.

Стандарты HTML определяют пять значений для атрибута align:

left — выравнивание по левому краю
right — выравнивание по правому краю
top — выравнивание по верхнему краю
bottom — выравнивание по нижнему краю (это значение по умолчанию)
middle — выравнивание по середине

Если вы не используете атрибут align, то выполняется выравнивание картинки по нижнему краю (как на рисунке выше).

Итак, если вы хотите, чтобы текст обтекал картинку справа, то значение
атрибута align должно быть равно left. Это немного странно, если думать о выравнивании текста. Но мы то выравниваем не текст, а картинку. Поэтому всё правильно — картинка будет слева, а текст — справа.

Пример выравнивания картинки по левому краю (обтекание текстом справа):

<img src="images-in-html.jpg" align="left">

А вот так примерно это будет выглядеть в браузере:

Рамка вокруг рисунка в HTML

Вообще этим пользуются редко, но иногда всё-же необходимо сделать рамку
вокруг рисунка. Для этого можно использовать атрибут border. Делается это примерно так:

<img border="5" src="warning.png">

Некоторые браузеры могут обводить рисунок рамкой по умолчанию, если атрибут
border не указан. Поэтому, чтобы быть уверенным в том, что
рамки вокруг рисунка не будет, лучше всегда использовать атрибут border с нулевым значением.

Атрибуты hspace и vspace

Как же сделать отступы между текстом и картинкой? Для этого есть атрибуты
hspace и vspace, которые задают отступы от горизонтального (справа и слева) и вертикального (сверху и снизу) края картинки соответственно. Пример:

<img src="images-in-html.jpg" width="300" align="left" 
          hspace="50" vspace="10">

Картинка в заголовке HTML

Иногда требуется вставить картинку в заголовок. Сделать это несложно. Например:

<h2><img src="warning.png" alt="!!!"> Очень важно</h2>

А выглядеть это будет примерно так:

И вообще картинки можно вставлять куда угодно — в таблицы, в списки и т.п.

О картинках много ещё чего можно рассказать. И я как-нибудь вернусь к этому вопросу. Но на сегодня всё.

А если хотите знать больше и прямо сейчас, то
изучите курс о вёрстке сайтов.

Как создать свой сайт

Очень небольшая книга, которую можно прочитать буквально за 15 минут. Но эти 15 минут дадут вам представление о том, как создаются современные сайты…
Подробнее…

Помощь в технических вопросах

Помощь студентам. Курсовые, дипломы, чертежи (КОМПАС), задачи по программированию: Pascal/Delphi/Lazarus; С/С++; Ассемблер; языки программирования ПЛК; JavaScript; VBScript; Fortran; Python; C# и др. Разработка (доработка) ПО ПЛК (предпочтение — ОВЕН, CoDeSys 2 и 3), а также программирование панелей оператора, программируемых реле и других приборов систем автоматизации.
Подробнее…

Источник