並排放置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

我試圖運行您的代碼，它並排顯示。 我認為這是在您定義的班級上。 如果在div上設置了寬度，請嘗試檢查css，然后調整大小並再次運行程序。

Answer 2

聽起來您的容器不夠寬。 確保父元素的寬度至少為426px。

ID還建議您將兩個圖像都向左浮動，並在其后添加一個clearfix。

<div class="timeline-item">
<div class="year">2013<span class="marker"><span class="dot"></span></span></div>
<div class="info">
<img style="float:left;" width="213" height="213" alt="" class="info" style="border-style: none;" src="019.jpg" />
<img style="float:left;" width="213" height="213" class="info" style="border-style: none;" src="281.jpg" alt="" />
<div style="clear:both;" style="text-align: center;">CAPTION HERE</div>
</div>
</div>

Answer 3

你給了你

.timeline {width: 400px;} 
.info {width:500px;width:78%}

那么您將制作寬度為218px的圖像，並將其添加為.info類。 寬度為500px和78％！，其中78％將被應用。

它如何留在該父容器中？ 我制造了一個小提琴。 並給您的時間軸類一個1px的邊框，以顯示父容器的大小。

評論我在這里我所缺少的，然后可能對您有所幫助。

JS小提琴。