HTML5 & CSS3: Выравнивание текста рядом с изображением

Изображения выравниваются друг с другом, но текст отображается рядом с первым изображением.HTML5 & CSS3: Выравнивание текста рядом с изображением

Я хочу, чтобы первые h2 и p появлялись рядом с первым изображением, а второй h2 и p отображались рядом со вторым изображением.

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Yoko Lounge</title> 
     <meta name="author" content="Yoko"/> 
     <link href="styles.css" rel="stylesheet" type="text/css"/> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="header"> 
       <h1>Yoko Lounge</h1> 
      </div> 
      <div id="nav"> 
       <ul> 
        <li class="current">Home</li> 
        <li>Forum</li> 
        <li>Members</li> 
        <li>Calendar</li> 
        <li>Logout</li> 
       </ul> 
      </div> 
      <div id="figs"> 
       <img class="figure" src="bok-choi.jpg" alt="bok"/> 
       <h2>Best Plant</h2> 
       <p>This plant gives you health.</p> 
       <img class="figure" src="teriyaki.jpg" alt="teriyaki"/> 
       <h2>Teriyaki Health Plant</h2> 
       <p>This plant gives you health.</p> 
      </div> 
     </div> 
    </body> 
</html>

CSS:

body { 
    background: url("dark-wood.jpg"); 
    margin: 0px; 
} 

#wrapper { 
    width: 920px; 
    margin: 20px auto; 
    border: 2px solid black; 
} 

#header { 
    height: 130px; 
    background: url("header.jpg"); 
} 

h1 { 
    text-indent: -9999px; 
    margin: 0px; 
} 

#nav { 
    background: #AEACA8; 
    color: #FFFFFF; 
    height: 30px; 
} 

#nav ul { 
    margin: 0px; 
    padding: 5px 0px 5px 30px; 
} 

#nav li { 
    display: inline; 
    margin-right: 40px; 
} 

#nav ul li.current, #nav ul li:hover { 
    color: black; 
} 

#content { 
    background: #FFFFFF; 
    color: black; 
    width: 100%; 
} 

#figs { 
    background: #FFFFFF; 
    color: black; 
    float: left; 
    width: 70%; 
} 

img.figure { 
    display: block; 
    border: 1px solid black; 
    margin: 20px 20px; 
    float: left; 
}

источник

2013-06-18 Ahmed Hamdy

Вы должны добавить <div style="clear: both"></div> перед вторым изображением. Это заставит следующие предметы течь под первыми тремя предметами, которые были перемещены слева.

источник

2013-06-18 19:47:43

Это сработало очень хорошо, спасибо. Но можете ли вы объяснить, что он делает? –

Nvm, я понял, спасибо еще раз. –

использование <div style="clear:left"></div> после каждого изображения, чтобы предотвратить распространение плавучего эффекта ваших h2 и р элементов, как это:

  <div id="figs"> 
      <img class="figure" src="bok-choi.jpg" alt="bok"/> 

      <div style="clear:left"></div> <!-- add this to stop float effect due to 1st image --> 

      <h2>Best Plant</h2> 
      <p>This plant gives you health.</p> 
      <img class="figure" src="teriyaki.jpg" alt="teriyaki"/> 

      <div style="clear:left"></div> <!-- add this to stop float effect due to 2d image --> 


      <h2>Teriyaki Health Plant</h2> 
      <p>This plant gives you health.</p> 
     </div>

источник

2013-06-18 19:59:49 medBo

<div id="figs"> 
     <img class="figure" src="bok-choi.jpg" alt="bok"/> 
     <h2>Best Plant</h2> 
     <p>This plant gives you health.</p> 
     <div class="clear"></div> <!-- add clear class --> 
     <img class="figure" src="teriyaki.jpg" alt="teriyaki"/> 
     <h2>Teriyaki Health Plant</h2> 
     <p>This plant gives you health.</p> 
    </div>

------- CSS -------

.clear { 
clear:both; 
}

источник

2013-06-18 20:39:09 feitla

HTML5 & CSS3: Выравнивание текста рядом с изображением

ответ

Смежные вопросы