0

現時点でそのようなコードを含むメインページテンプレートがあります: https://www.dropbox.com/s/lrv11sean6y15se/index_backup.txt (どういうわけか、ここにコードを追加することはできません)

次のようになります。 ここに画像の説明を入力

***** 最初の質問が表示されます。[[説明]] テキストを左の 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の右側にうまく表示されるようにしたいと思います。このテキストはより長いテキストに変更され、挿入したい部分はすべてのテキストとインラインで、次のようになります。

ここに画像の説明を入力

インライン表示やその他の方法を試してみましたが、それらはすべてテンプレートを完全に混乱させ、誰も私を助けることができず、インラインを使用しないで他の方法を学ぶように指示するだけです。ですから、どうすればこれを行うことができるか、あなたの方法を共有していただきたいと思います。

4

2 に答える 2

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 に答える
0

最初の質問 style="margin-left:10px"

于 2013-01-10T11:19:23.083 に答える