【问题标题】:how to put figures side by side (float)如何并排放置数字(浮点数)
【发布时间】:2023-03-03 15:15:01
【问题描述】:

<figure class="left">
<img class="top" src="top10.jpg" width="400" height="300"/>
<figcaption> Fig1. Production value and quantity of the 10 top commodities </figcaption>
</figure>

<figure class="right">
<img class="average" src="average.jpg" width="400" height="300"/>
<figcaption> Fig2. Averages per metric ton </figcaption>
</figure>

我想把这些数字并排放置。我试图让第一个浮动:左和第二个浮动:右,但它没有帮助。谁能帮帮我?

【问题讨论】:

    标签: css html figure


    【解决方案1】:

    由于figure是块级元素,所以添加这条CSS规则并使其内联,如果空间足够,它将并排。

    .left, .right {
      display: inline-block;
    }
    

    示例 sn-p

    .left, .right {
      display: inline-block;
    }
    <figure class="left">
      <img class="top" src="top10.jpg" width="400" height="300"/>
      <figcaption> Fig1. Production value and quantity of the 10 top commodities </figcaption>
    </figure>
    
    <figure class="right">
      <img class="average" src="average.jpg" width="400" height="300"/>
      <figcaption> Fig2. Averages per metric ton </figcaption>
    </figure>

    【讨论】:

      【解决方案2】:

      尝试将float: left 应用于这两个数字。

      此外,这种方法可能很有用:

      <style>
      .line{  /* Describes only positioning behaviour */
          display: block; /* Not important, but helpful in this case */
          clear: both;    /* Not important, but helpful in this case */
      }
      
      .line__figure{ /* Describes only positioning behaviour */
          float:left;
      }
      
      .figure{ /* Describes only view representation. */
          display: block; /* Not important, but helpful in this case */
      }
      
      .figure__image{
          background: lightgray;
          width: 400px;
          height: 300px;
      }
      </style>
      <article>
          <section class='line'>
              <figure class="line__figure figure">
                  <img class="figure__image top" src="top10.jpg" />
                  <figcaption>Fig1. Production value and quantity
                  of the 10 top commodities</figcaption>
              </figure>
              <figure class="line__figure figure">
                  <img class="figure__image average" src="average.jpg" />
                  <figcaption>Fig2. Averages per metric ton</figcaption>
              </figure>
          </section>
          <section class='line'>
          Some text
          </section>
      </article>

      想法:

      【讨论】:

        【解决方案3】:

        尝试使用对齐而不是浮动,这可能会起作用。您还可以使用表格,将图片放在一行中,但在两列中。

        【讨论】:

          【解决方案4】:

          父元素需要有足够的宽度左右浮动

          <div style="width:1000px">
              <figure class="left" style="float:left">
              <img class="top" src="top10.jpg" width="400" height="300"/>
              <figcaption> Fig1. Production value and quantity of the 10 top commodities </figcaption>
              </figure>
          
              <figure class="right" style="float:right">
              <img class="average" src="average.jpg" width="400" height="300"/>
              <figcaption> Fig2. Averages per metric ton </figcaption>
              </figure>
          </div>

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2017-08-07
            • 1970-01-01
            • 1970-01-01
            • 2012-10-14
            • 2022-11-01
            • 2021-04-22
            • 2011-02-07
            • 2017-07-07
            相关资源
            最近更新 更多