Question

我在一个aritcle中有一个部分。和同一文章中的数字。我有3个部分和3个数字。我想要的是将部分和图形并排排列。例如，

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

到目前为止，我试图浮动数字......但是这个数字似乎位于该部分的顶部。我希望他们两个并排分开。继承人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;
}

当我尝试浮动图像时，它似乎位于剖面背景之上。我希望他们分开。我如何实现这一目标？谢谢。编辑** 请避免divs。谢谢

Answer 1

使用float使用display:inline-block;＆amp; width:40%这两个部分和＆amp;图并排显示。

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>

定位图旁边的部分

1 个答案: