HTML麻烦浮动两个图像并排侧

有麻烦试图使两个图像显示并排，它们不完全一致，我不知道如何解决它，HTML麻烦浮动两个图像并排侧

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

来源

2017-04-18 Syystole

使用柔性布点

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

包装所有进入格，并设置类.side由端上包裹格

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

来源

2017-04-18 12:18:16 Synoon

你可以试试这个

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

来源

2017-04-18 12:23:13 Julie20

这个代码可以解决你的问题：

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

来源

2017-04-18 12:38:37

HTML麻烦浮动两个图像并排侧

回答

相关问题