0

我有主页模板，目前有这样的代码：https ://www.dropbox.com/s/lrv11sean6y15se/index_backup.txt （我无法在帖子中添加代码）

看起来像这样： 在此处输入图像描述

***** 第一个问题出现了，如何使 [[Description]] 文本距离左 div 边框 10px？**

然后我有一个我想插入到这个页面的部分，它有这样的代码：

<div style="text-align:center; width: 324px; color: #ffffff; background-color:#6b8861; font-size : 34px;">[[Title]]</div>
<div style="border:1px dotted #6b8861; text-align:center; width: 324px; color: #6b8861; background-color:#ffffff; font-size : 34px;">[[Picture1]]</div>

看起来像这样： 在此处输入图像描述

我希望这部分能很好地出现在 div 的右侧，其中的文本是“[[Description]]”。我不得不提到，这个文本将被更改为更长的文本，我要插入的那部分应该与所有文本内联，看起来像这样：

在此处输入图像描述

我尝试使用 display inline 和其他方法，但是它们完全使我的模板变得混乱，我达到了没有人可以帮助我的地步，只是告诉我不要使用 inline 并学习其他方法。所以伙计们，我希望你们分享你们的方法，我怎么能做到这一点。

4

2 回答 2

0

第一个问题 style="margin-left:10px"

于 2013-01-10T11:19:23.083 回答
0

如果代码流程是这样的，它应该可以完美运行

.wrapper{position:relative; width:100%; overflow:auto}
.descrptn{display:inline-block; background:#fbffe2; float:left; margin-left:10px; width:60%}
.right{display:inline-block;  margin:0 10px; float:right}

演示

根据原始码更新

您需要正确订购 div，这意味着所有子 div 都应该有一个父 div。

HTML

<div class="wrapper">

<div class="header"> 
<a href="www.one.lt"> <img border="0" src="http://www.gvcdigital.co.uk/images/graphic/header.png" width="985" height="96" alt="header" title="DigiSpot eBay store" /></a>
</div>

<div class="nav_menu"> 
<img border="0" src="http://www.gvcdigital.co.uk/images/graphic/meniu.png" alt="DigiSpot meniu" width="985" height="41" usemap="#mapas" />
  <map name="mapas">
    <area shape="rect" coords="56,0,0,41" href="www.one.lt" alt="DigiSpot eBay store home" title="DigiSpot eBay store home">
    <area shape="rect" coords="539,0,400,41" href="www.one.lt" alt="About Digispot" title="About DigiSpot">
    <area shape="rect" coords="699,0,539,41" href="www.one.lt" alt="Delivery information" title="Delivery information">
    <area shape="rect" coords="845,0,699,41" href="www.one.lt" alt="Returns information" title="Returns information">
    <area shape="rect" coords="985,0,845,41" href="www.one.lt" alt="Contacts information" title="Contacts information">
  </map>
</div>

<div class="desc"><img border="0" src="http://www.gvcdigital.co.uk/images/graphic/description.png" width="232" height="81"></div>

<!--Contaent starts-->
<div class="content">
<div class="left_panel">Lorem ipsum .</div>
<div class="right_panel">
  <div style="text-align:center; width: 324px; color: #ffffff; background-color:#6b8861; font-size : 34px;">[[Title]]</div>
  <div style="border:1px dotted #6b8861; text-align:center; width: 324px; background-color:#ffffff;">[[Picture1]]</div>
</div>
</div>
<!--Contaent ends-->
<div class="footer"><img border="0" src="graphic/buttom.png" width="524" height="42"></div>

</div>

CSS

body {
    color: #25670c;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family : Times New Roman;
    font-size : 14px;
    text-align: center;
}
.wrapper{width:1000px; margin:0 auto}
.header{height: 96px; width: 985px; margin: 0 auto;}
.nav-menu{
    height: 41px; width: 985px; margin: 0 auto;
}
.desc{width: 985px; height:81px; text-align: center; background-color:#d6d6a4;margin: 0 auto;}
.content{position:relative; width: 985px; overflow:auto}
.left_panel{ background:#fbffe2; float:left; margin-left:20px; width:600px; text-align:left}
.right_panel {

    text-align: left;
    background-color: #d6d6a4;
    margin: 0 auto; float:right
}
.footer {
    text-align: center;
    width: 985px;
    background-color: #d6d6a4;
    margin: 0 auto;
}

演示更新

于 2013-01-10T11:25:49.147 回答