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。

enter image description here

Answer 2

听起来你的容器不够宽。确保父元素的宽度至少为426像素。

此外，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 Fiddle.

并排放置2张图像

3 个答案: