创建像纽约时代一样的新面板

Question

我正试着通过bootstrap css。

我想创建与Highlights From 2014

类似的响应式推荐面板

这里看起来很小的simlair - http://jsfiddle.net/karimkhan/9r74Y/16/

但如果文字大小增加，图像会下降。当我在屏幕上进行操作时，我也感觉不到反应。见 - http://jsfiddle.net/karimkhan/9r74Y/17/

任何改进的帮助，使其看起来与响应效果类似。如果可能的话，也是字体样式。

html：

<div class="c1">
    <div class="item">
        <div class="descriptionContainer">
            <span class="main-head"> Life in the Valley of Death  </span>
            <span class="min-head">In Srebrenica, the remains of those killed in the genocide keep turning up, unsettling the reconciliation between Muslims and Serbs.</span>          
        </div>
        <div class="image"> 
            <img class="media-object" src="http://graphics8.nytimes.com/images/2014/06/01/magazine/01srebrenica4/mag-01srebrenica-t_CA4-thumbWide.jpg"/>
        </div>
    </div>  
</div>

Answer 1

试试这个..

.descriptionContainer{
width:75%;/*add on your css */
}

Answer 2

查看我的演示..可能对您有所帮助demo

＆＃13;

＆＃13;

.item {
    background: none repeat scroll 0 0 #ffffff;
    border-bottom: 1px solid #eeeeee;
    clear: both;

    float: left;
    padding: 10px 5px;
    
}
.image {
    display: inline-block;
    float: right;
    height: 60px;
    padding: 5px;
    vertical-align: middle;
}

.image img {
    height: 70px;
    vertical-align: middle;
    width: 90px;
}

.descriptionContainer {
    min-height: 60px;
    vertical-align: middle;
}

span.main-head {
    color: #000;
    font-size: 12px;
    font-weight: bold;
}

span.min-head {
    color: #898989;
    display: block;
    font-size: 11px;
    margin-top: 5px;
}

＆＃13;

<div class="c1">
    <div class="item">
		<div class="image"> 
            <img class="media-object" src="http://graphics8.nytimes.com/images/2014/06/01/magazine/01srebrenica4/mag-01srebrenica-t_CA4-thumbWide.jpg">
		</div>
<div class="descriptionContainer">
			<span class="main-head"> Life in the Valley of Death  </span>
            <span class="min-head">In Srebrenica, the remains of those killed in the genocide keep turning up, unsettling the reconciliation between Muslims and Serbs.</span>			
		</div>
<div style="clear:both"></div>
		
	</div>	
</div>

＆＃13;

＆＃13;

＆＃13;