难以尝试将两张图片并排显示,它们没有完美对齐,我不知道如何修复它,
<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>
答案 0 :(得分:1)
你可以试试这个
<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>
答案 1 :(得分:0)
使用flex布局
我更新了你的jsfiddle: https://jsfiddle.net/vfkg8018/13/
将all包装成div并在包装div上设置类.side-by-side
.side-by-side{
display: flex;
flex-direction: row;
}
答案 2 :(得分:0)
此代码可以解决您的问题:
<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 >