使用内联块的响应式设计

Question

我只是使用内联块设计一个HTML页面来响应它。我将所有块表单图像和文本设置为内联块，但是文本块被移动到图像块下，如何设置CSS并将文本块放在图像块旁边？

演示：http://jsfiddle.net/yckelvin/ar1f3uz5/

HTML代码

<div class="item-row">
<div class="item-li"><img src="https://3.bp.blogspot.com/-t9e7S8huhaQ/VBMVN6CbNGI/AAAAAAAAA14/02am46_jiJM/s1600/Big_smile.png" width="150" height="150" /></div>
<div class="item-desc" ><h1>Item 1</h1>
Description Description Description Description Description Description Description Description Description Description </div>
</div>

<div class="item-row item-indent-row">
<div class="item-li"><img src="https://3.bp.blogspot.com/-t9e7S8huhaQ/VBMVN6CbNGI/AAAAAAAAA14/02am46_jiJM/s1600/Big_smile.png" width="150" height="150" /></div>
<div class="item-desc"><h1>Item 2</h1>
Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description </div>
</div>

CSS代码

.item-row { display: block; width: 100%; padding: 30px; background-color: rgba(0,0,0,0.1); }
.item-indent-row { padding-left: 150px; }
.item-li {display: inline-block; width:50px; background-color: rgba(255,255,0,0.1); }
.item-desc {display: inline-block; background-color: rgba(0,0,255,0.1); padding-left: 0px;}

真实样本

第1项

描述描述描述

第2项

职饰描述描述描述描述

Answer 1

.item-desc {
    display:block;
    width:200px; 
    /*Or whatever width you wanted the description 
      to be. Just make sure it's not too wide to fit on the same line
    */
    float:left; 
    background-color: rgba(0,0,255,0.1); 
    padding-left: 0px;
 }

Answer 2

对white-space: nowrap;使用.item-row，white-space: normal;使用.item-desc