html css中的水平新闻滑块

Question

我正在为网站制作最新的新闻栏。它需要看起来像这样：

这是fiddle。请指导我如何实现像设计一样的形象。感谢。

HTML：

.green{
    height:30px; 
    background-color:#3E6A56;
    color:#FFF;
    width:130px;
    float:left;  
}
.black{
    height:30px; 
    background-color:#000000; display:inline;
    float:right;
    color:#FFF;
    width:100%;
}

CSS：

animation

Answer 1

http://jsfiddle.net/b648z1ve/2/

.green{
    height:30px; 
    background-color:#3E6A56;
    color:#FFF;
    width:130px;
    float:left;  
    width:30%;
}
.black{
    height:30px; 
    background-color:#000000; display:inline;
    float:right;
    color:#FFF;
    width:70%;
}

Answer 2

添加并编辑了一些代码 -

.black{
    height:30px; 
    background-color:#000000; display:inline;
    float:right;
    color:#FFF;
    width:calc(100% - 130px);
}
.green, .black {
    box-sizing: border-box;
    display: inline-block;
}

http://jsfiddle.net/b648z1ve/3/

Answer 3

试试这个

CSS：

.header{
display:inline-flex;
width:100%;
}

HTML：添加容器div

<div class="header">
<div class="green">
Latest News
</div>
<div class="black">
Some text here
</div>
</div>

http://jsfiddle.net/b648z1ve/5/