Позиционирование секции рядом с рисунком

Question

У меня есть разделы в aritcle. И цифры в той же статье. У меня 3 раздела и 3 цифры. Я хочу, чтобы выровнять секцию и фигурировать бок о бок альтернативно. Например,

#ARICLE# 
     #SECTION# #FIGURE # 
     #FIGURE # #SECTION# 
    #END 

До сих пор я пробовал плавать фигуру ... Однако фигура, похоже, находится над секцией. Я хочу, чтобы оба они были разделены бок о бок. Heres html

<article> 
     <section id="about"> 
      <header>About me</header> 
      <p> 
       A text     
      </p> 
     </section> 
     <figure> 
      <img src="css/images/body2.jpg" height="200" width="300" /> 
      <figcaption>An image</figcaption> 
     </figure> 
    </article> 

Мой раздел имеет другой фон, моя фигура будет содержать другое изображение. У моего тела также есть другой фон. Херес CSS

section { 
     background-image: url("images/paper.png"); 
     padding-right: 20px; 
     padding-left: 20px; 
} 

figure { 
     margin-right: 15px; 
     float: left; 
} 

Когда я пытаюсь плыть образ, это, кажется, на верхней части фона раздела. Я хочу, чтобы они разделились. Как мне это достичь? Спасибо. EDIT ** ПОЖАЛУЙСТА, избегайте divs. Спасибо

Answer 1

Вместо этого использования float Использование display:inline-block; & width:40% как для секции & фигуры, чтобы отобразить его бок о бок.

section { 
 
     background-image: url("images/paper.png"); 
 
    } 
 

 
    section,figure { 
 
     display:inline-block; 
 
     width:40%; 
 
    padding-right: 20px; 
 
     padding-left: 20px; 
 
    -webkit-margin-start: 0px; 
 
-webkit-margin-end: 0px; 
 
}

<article> 
 
     <section id="about"> 
 
      <header>About me</header> 
 
      <p> 
 
       A text     
 
      </p> 
 
     </section> 
 
     <figure> 
 
      <img src="css/images/body2.jpg" height="200" width="300" /> 
 
      <figcaption>An image</figcaption> 
 
     </figure> 
 
     <figure> 
 
      <img src="css/images/body2.jpg" height="200" width="300" /> 
 
      <figcaption>An image</figcaption> 
 
     </figure> 
 
    <section id="about"> 
 
      <header>About me</header> 
 
      <p> 
 
       A text     
 
      </p> 
 
     </section> 
 

 
    <section id="about"> 
 
      <header>About me</header> 
 
      <p> 
 
       A text     
 
      </p> 
 
     </section> 
 
     <figure> 
 
      <img src="css/images/body2.jpg" height="200" width="300" /> 
 
      <figcaption>An image</figcaption> 
 
     </figure> 
 
    </article>