如何並排放置數字側（浮動）

<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>

我希望把這些數字使他們並排。我試圖做第一個浮動：左邊和第二個浮動：右邊，但它沒有幫助。誰能幫我？

來源

2016-02-18 yerassyl

嘗試兩個數字都適用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>

思路：

分流動行爲和視覺表示的邏輯。
使用Block, Element, Modifier的方法。

來源

2016-02-18 16:59:30

而不是浮動嘗試使用對齊，這可能工作。您也可以使用表格，並將圖像放在一行中，但分兩列。

來源

2016-02-18 16:39:01

由於figure是塊級元素，因此添加此CSS規則並將其內聯，如果有足夠的空間，它將並排。

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

示例代碼段

.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>

來源

2016-02-18 16:47:56 LGSon

父元素需要有足夠的寬度爲float，左，右

<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>

來源

2016-02-18 16:54:19 koushlendra

如何並排放置數字側（浮動）

回答

相關問題