我只是使用内联 block 设计了一个 HTML 页面,使其具有响应性。我将所有 block 形式的图像和文本设置为内联 block ,但文本 block 被移动到图像 block 下,我如何设置 CSS 并将文本 block 放在图像 block 的右边?
演示: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
说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明最佳答案
.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;
}
关于css - 使用内联 block 的响应式设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26112512/