HTML麻煩浮動兩個圖像並排側

Question

有麻煩試圖使兩個圖像顯示並排，它們不完全一致，我不知道如何解決它，

<article style="width:100%;"> 
<h1> Repair Services </h1> 
<p> We repair computers </p> 
<img src="http://lorempixel.com/400/200/" style="float:left"> 
</article> 

<article style=";width:100%;"> 
<h1> Repair Services </h1> 
<p> We repair computers </p> 
<img src="http://lorempixel.com/400/200/" style="float:right"> 
</article> 

這裏是小提琴https://jsfiddle.net/Syystole/vfkg8018/11/

Answer 1

使用柔性布點

我更新您的jsfiddle： https://jsfiddle.net/vfkg8018/13/

包裝所有進入格，並設置類.side由端上包裹格

.side-by-side{ 
display: flex; 
flex-direction: row; 
} 

Answer 2

你可以試試這個

<div style="float:left"> 
    <article style="width:100%;"> 
     <h1> Repair Services </h1> 
     <p> We repair computers </p> 
     <img src="http://lorempixel.com/400/200/" style="float:left"> 
    </article> 
</div> 
<div style="float:left"> 
    <article style="width:100%;"> 
     <h1> Repair Services </h1> 
     <p> We`enter code here` repair computers </p> 
     <img src="http://lorempixel.com/400/200/" style="float:right"> 
    </article> 
</div> 

Answer 3

這個代碼可以解決你的問題：

<article style="width:100%;"> 
<div style="float:right;width:50%"> 
    <div style="float:right; margin-left:20px"> 
     <h1> Repair Services </h1> 
     <p> We repair computers </p> 
    </div> 
    <div style="float:right"> 
     <img src="http://lorempixel.com/400/200/"> 
    </div> 
</div> 

<div style="float:right;width:50%"> 
    <div style="float:right; margin-left:20px"> 
     <h1> Repair Services </h1> 
     <p> We repair computers </p> 
    </div> 
    <div style="float:right"> 
     <img src="http://lorempixel.com/400/200/"> 
    </div> 
</div></article >