html - 并排放置2张图片

Question

我这里有个小问题。我有 2 张图片需要并排放在我的时间轴上，但无论我做什么，另一张最终都会出现在第一张图片 (Image1) 下。我尝试将 style="float: right;" 放在另一张图片 (Image2) 上，但它只会将第二张图片向右移动一点。

这是我的 HTML 代码:

<div style="overflow:auto; padding: 2em; max-width: 1000px; max-height: 500px; background-color: rgb(182,0,0);" class="container">
<div class="timeline">
<div class="timeline-item">
<div class="year">2014<span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="" style="border-style: none;" class="info" /><br />   
<div style="text-align: center;"> ACTIVITY INFORMATION HERE</div></div></div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="" style="border-style: none;" class="info" />
<div style="text-align: center;"> ACTIVITY INFORMATION HERE</div></div></div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="" style="border-style: none;" class="info" />
<div style="text-align: center;"> ACTIVITY INFORMATION HERE</div></div></div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="" style="border-style: none;" class="info" />
<div style="text-align: center;"> ACTIVITY INFORMATION HERE</div></div></div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="" style="border-style: none;" class="info" />
<div style="text-align: center;"> ACTIVITY INFORMATION HERE</div></div></div>
<div class="timeline-item">
<div class="year">2013<span class="marker"><span class="dot"></span></span></div>
<div class="info"><img align="right" width="213" height="213" class="info" src="/Clients/019.jpg" style="border-style: none;" alt="Image1" />
<img align="right" width="213" height="213" class="info" alt="Image2" src="/Clients/281.jpg" style="border-style: none;" /><br />
<div style="text-align: center;">January 26 to 27 - Seminar &amp; Team Building @ SN David Apartelle</div></div></div></div></div></div>

这是我的 CSS 代码:

    <style>
    div {
        font-family: Helvetica, Arial, sans-serif;
        box-sizing: border-box;
    }
    .timeline {
        width: 400px;
    }
    .timeline .timeline-item {
        width: 100%;
    }
    .timeline .timeline-item .info, .timeline .timeline-item .year {
        color: #E87474;
        display: block;
        float:left;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
    }
    .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {
        color: #ccc;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
    }
    .timeline .timeline-item .year {
        font-size: 24px;
        font-weight: bold;
        width: 22%;
    }
    .timeline .timeline-item .info {
        width: 500px;
        width: 78%;
        margin-left: -2px;
        padding: 5px 0 40px 35px;
        border-left: 4px solid #FFE400;
        font-size: 16px;
        font-weight: bold;
        line-height: 20px;
    }
    .timeline .timeline-item .marker {
        background-color: #eee;
        border: 4px solid #FFE400;
        height: 20px;
        width: 20px;
        border-radius: 100px;
        display: block;
        float: right;
        margin-right: -14px;
        z-index: 2000;
        position: relative;
    }
    .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {
        color: #ffffff;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
    }
    .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {
        color: #FFE400;
    }
    .timeline .timeline-item .marker .dot {
        background-color: white;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
        display: block;
        border: 4px solid white;
        height: 12px;
        width: 12px;
        border-radius: 100px;
        float: right;
        z-index: 2000;
        position: relative;
    }
    .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
        background-color: #0F8DC7;
        box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
    }
    .info{
        transition: all 1s ease;
        opacity: 0.2;
        filter: alpha(opacity=20);
        display: inline-block;
        float: right;
        width: 50%;
    }
    .info:hover{
        transition: all 1s ease;
        position: relative;
        opacity: 1.0;
        filter: alpha(opacity=100);
    }
</style>

我哪里做错了？希望尽快听到一些答案。谢谢!

Answer 1

我尝试运行您的代码，它并排显示。我认为它是在您定义的类(class)中。如果您在 div 上设置宽度，请尝试检查您的 css，然后调整大小并再次运行您的程序。