在容器的顶部添加图片并创建列

问题是我不知道这种类型的代码是如何调用的，所以在这里搜索它有点困难。在容器的顶部添加图片并创建列

什么，我需要做的是在一个容器中添加一个顶部背景所以它是这样的：

“文本标题” - 下面，我想有从标头中的背景单独的内容然后创建一个3分列（1 2向上划分并低于一个完整的）

jsfiddle.net/U56UA/（对不起IDK的如何代码它）

耳鼻喉科的目标这个容器应该有1层的基本信息，第二层显示它的会员资格和下面的个人信息（服务等）

如果有人能解释我（我在学习，对不起）或发送一些网站的地方解释。

编辑：http://pastebin.com/4BVfeFxj（当前指数） http://pastebin.com/56Mtk1yg（当前CSS）

谢谢！

来源

2013-12-17 Pixio

我不明白你的小提琴和你的形象。你可能会分享一个预期的合并最终结果的图像吗？ –

图片和描述不匹配。图层？您需要基本的CSS和html技能来实现图像中的布局。 http://teamtreehouse.com/ – Christina

对不起，我的解释。我希望这张照片能够说明我在缺乏知识的情况下试图解释的内容。 http://i.imgur.com/EBsBHgx.png – Pixio

下面是根据你的形象FIDDLE。

<div class="container"> 

    <header>Stats</header> 

    <section class="left"> 
    <span>LEFT</span> 
    </section> 

    <section class="right"> 
    <span>RIGHT</span> 
    </section> 

    <footer> 
    <span>CONTENT</span> 
    </footer> 

</div>

.container { 
    width: 1000px; 
    margin: 0 auto; 
    border: 1px solid #c5c5c5; 

    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
} 
header { 
    background: #000; 
    height: 40px; 
    line-height: 40px; 
    color: #fff; 
    text-align: center; 
} 
footer { 
    clear: both; 
    width: 97.8%; 
    min-height: 180px; 
    padding: 10px; 
    text-align: center; 
    border: 1px solid #c5c5c5; 
} 
.left, 
.right { 
    float: left; 
    width: 47.8%; 
    min-height: 200px; 
    padding: 10px; 
    border: 1px solid #c5c5c5; 
}

来源

2013-12-17 21:19:44 mdesdev

感谢您的帮助，这一款也确实击中了正确的钥匙。 – Pixio

不客气;） – mdesdev

-1

请参阅您的jsfiddle的this modification：

CSS：

.container { 

    margin-left: auto; 
    margin-right: auto; 
    border-radius: 3px; 
    background-color: white; 
    padding: 5px 5px; 
    border: 1px solid hsl(0, 0%, 77%); 
} 
.container table { 
    width:100%; 

} 
.container table tr td,th{ 
    padding: 5px; 

} 
.container table td { 
    border:1px solid gray; 

} 
.container .statshead { 
    background: black; 
    color: white; 
    width:100%; 
}

HTML：

<div class="container"> 
<table align="center" border="0" cellspacing="15"> 
    <tr> 
     <th colspan="2" class="statshead"> 
      Statictic 
     </th> 

    </tr> 
    <tr> 
     <td>Name:</td> 
     <td>Text Demo</td> 
    </tr> 
    <tr> 
     <td>Name:</td> 
     <td>Text Demo</td> 
    </tr> 
    <tr> 
     <th colspan="2" class="statshead"> 
      Information 
     </th> 

    </tr> 
    <tr> 
     <td>Name:</td> 
     <td>Text Demo</td> 
    </tr> 
    <tr> 
     <td>Name:</td> 
     <td>Text Demo</td> 
    </tr> 

</table></div>

来源

2013-12-17 21:22:49 user1956570

你确切地知道我在找什么。谢谢 – Pixio

在容器的顶部添加图片并创建列

回答

相关问题