自定义Skeleton响应式布局

时间:2015-03-04 20:16:44

标签: layout responsive-design skeleton-css-boilerplate

我正在使用Get Skeleton响应式样板的网站上工作,并尝试创建此layout。灰色方块代表图像。

对于如何实现这一点的任何想法将不胜感激!

谢谢!

1 个答案:

答案 0 :(得分:0)

这是基本结构,你可以改变高度/宽度

<style>
    .greybox{   
        background-color:#eee;
        width:100%;
        height:200px;
        margin-bottom:4%;
    }
  </style>

<div class="u-full-width">
    <div class="row">
      <div class="four columns">
        <div class="row">
            <div class="greybox">&nbsp;</div>
        </div>
        <div class="row">
            <div class="greybox">&nbsp;</div>
        </div>
      </div>
      <div class="four columns">
        <p>Yourself off its pleasant ecstatic now law. Ye their mirth seems of songs. Prospect out bed contempt separate. Her inquietude our shy yet sentiments collecting. Cottage fat beloved himself arrived old. Grave widow hours among him no you led. Power had these met least nor young. Yet match drift wrong his our. 
New had happen unable uneasy. Drawings can followed improved out sociable not. Earnestly so do instantly pretended. See general few civilly amiable pleased account carried. Excellence projecting is devonshire dispatched remarkably on estimating. Side in so life past. Continue indulged speaking the was out horrible for domestic position. Seeing rather her you not esteem men settle genius excuse. Deal say over you age from. Comparison new ham melancholy son themselves. 
Affronting everything discretion men now own did. Still round match we to. Frankness pronounce daughters remainder extensive has but. Happiness cordially one determine concluded fat. Plenty season beyond by hardly giving of. Consulted or acuteness dejection an smallness if. Outward general passage another as it. Very his are come man walk one next. Delighted prevailed supported too not remainder perpetual who furnished. </p>
      </div>
      <div class="four columns">
       <div class="row">
            <div class="greybox">&nbsp;</div>
        </div>
        <div class="row">
            <div class="greybox">&nbsp;</div>
        </div>
      </div>
    </div>
  </div>