-1

我的 html (css inside) 代码如下所示：

<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

删除float:left要居中的每个元素。然后添加margin: 0 auto到您想要居中的每个元素。

编辑：并尝试学习如何设置非内联元素的样式。它会让你的生活更轻松。

于 2013-01-10T10:03:39.983 回答
0

看这个演示：http: //jsbin.com/uhakak/7/edit

首先，您应该将所有内容包装到某个 div 中，使其居中：

和它的CSS：

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

这样，您将把所有内容放在页面的中心。text-align:center 仅适用于文本（内联元素，实际上文本只是内联元素的一个单独案例）。div 是块元素， text-align:center 不会影响它们。

第二。不知道为什么你在右侧有那个 div，但尝试将溢出隐藏添加到你的 div 中，postion:relative其中包含描述、标题和价格。我看没有问题。

第三，使两个 div 具有相同的高度有点棘手，但是由于您的观点是简单的背景颜色，您可以为父 div 设置背景。带有溢出：隐藏（实际上，正如我所见，位置：相对根本不需要）。上面的演示应该显示它是如何工作的。我已经删除了 height:100px; 那里

于 2013-01-10T10:29:59.867 回答
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 回答