-1

私のhtml（内部のcss）コードは次のようになります：

<body style="color: #25670c; margin: 0 0 0 0; padding: 0 0 0 0; font-family : Times New Roman; font-size : 14px; text-align: center;">


<div style="height: 96px; width: 985px;"><a href="www.one.lt">
    <img border="0" src="images/graphic/header.png" width="985" height="96" alt="header" title="DigiSpot eBay store" /></a></div>
<div style="height: 41px; width: 985px;">
    <img border="0" src="/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 style="position:relative">
    <div style="float:left; width: 663px; height:100px; text-align: center; background-color:#d6d6a4;"><img border="0" src="/images/graphic/description.png" width="232" height="81"><br /><div style="text-align: left; margin-left: 10;">[[Description]]</div></div>
    <div style="float:left; width: 324px; height:100px; text-align: center; ">
        <div style="width: 324px; color: #ffffff; background-color:#6b8861; font-size : 34px;">[[Title]]</div>
        <div style="width: 324px; color: #ffffff; background-color:#6b8861;"><div style="width: 320px; margin: 2 2 2 2; background-color:#ffffff;">[[Picture1]]</div><div style="width: 300px; height: 2px; background-color:#6b8861; color: #6b8861;"></div></div>
        <div style="width: 324px; color: #801010; font-size : 40px; background-color:#d6d6a4;">Price: [[BuyItNowPrice]]</div>
    </div>
</div>
<div style="clear: both; text-align: center; width:985px; margin: 0 auto;"><img border="0" src="graphic/buttom.png" width="524" height="42"></div>

</body>

結果は私が望むようではなく、次のようになります： ここに画像の説明を入力してください ここにプッシュすると大きな画像

ここにストロークの問題のある領域があります： ここに画像の説明を入力してください ここにプッシュすると大きな画像

  1. このページをすべて中央に揃えたいのですが、本文のテキスト揃えで使用しましたが、役に立ちません。
  2. 右側のdivはページ下部の中央にあるはずです。なぜ彼がそのような位置を選択したのかわかりません。また、画像の一部が「Price」divの下にあります。
  3. 左右の価格でその説明divを実行することは可能ですか？他の情報divは常に同じ高さであり、固定されていません。これらのdivの背景を下部で分離しないようにしたいからです。

編集：画像をプッシュして大きくします。

4

3 に答える 3

0

このデモを参照してください：http： //jsbin.com/uhakak/7/edit

まず、すべてのコンテンツをいくつかのdivにラップして、中央に配置する必要があります。

そしてそれのためのcss：

#mainContent {
  width:945px;
  margin:0 auto;
}

そうすれば、すべてをページの中央に配置できます。text-align：centerはテキストに対してのみ機能します（インライン要素。実際には、テキストはインライン要素の別のケースです）。Divはブロック要素であり、text-align：centerはそれらに影響を与えません。

2番。右側にそのdivがある理由はわかりませんが、postion:relative説明、タイトル、価格を保持するdivにオーバーフローを非表示にしてみてください。問題ないと思います。

第三に、両方のdivの高さを同じにするのは少し難しいですが、ポイントは単純な背景色であるため、親divの背景を設定できます。それはoverflow：hiddenです（実際には、position：relativeはまったく必要ありません）。上記のデモは、それがどのように機能するかを示しているはずです。height：100pxを削除しました。そこの

于 2013-01-10T10:29:59.867 に答える
0

中央に配置するすべての要素を削除float:leftします。次に、中央に配置するすべての要素に追加margin: 0 autoします。

編集：インラインではなく要素のスタイルを設定する方法を学びましょう。それはあなたの人生をはるかに楽にします。

于 2013-01-10T10:03:39.983 に答える
0 
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #mypage{margin: 0 auto;
                width: 950px;}
            .main{margin: 0 auto;
                text-align: center;}
            .desc{width: 700px;    
                background-color:#d6d6a4;
                float: left;}
            .text{float: right;}
        </style>
    </head>    
    <body id="mypage">
        <div class="main">
            <div class="header">
                <a href="www.one.lt"><img src="http://www.gvcdigital.co.uk/images/graphic/header.png" alt="header" title="DigiSpot eBay store"></a>
            </div>
            <div class="menu">
                <img src="http://www.gvcdigital.co.uk/images/graphic/meniu.png" alt="DigiSpot meniu" usemap="#mapas"/>
            </div>
            <div class="desc">
                <img src="http://www.gvcdigital.co.uk/images/graphic/description.png">
            </div>
            <div class="text">[[Description]]</div><br> 
            <div class="text">[[Title]]</div><br>
            <div class="text">[[Picture1]]</div><br>
            <div class="text">Price: [[BuyItNowPrice]]</div>            
            <img src="graphic/buttom.png">
        </div>
    </body>
</html>
于 2013-01-10T10:45:38.560 に答える