HTML麻烦浮动两个图像并排

时间:2017-04-18 12:13:01

标签: html image alignment

难以尝试将两张图片并排显示,它们没有完美对齐,我不知道如何修复它,

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

3 个答案:

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