Div显示在错误的位置,高度

时间:2013-01-10 09:57:01

标签: css html relative

我的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>

结果不是我想要的,看起来像这样: enter image description here Bigger image on push here

以下是有问题的区域: enter image description here Bigger image on push here

  1. 我希望所有这个页面都与中心对齐,我在正文文本中对齐,但它没有帮助。
  2. 右边的div应该在页面底部的中心,我不知道为什么他选择这样的位置,图像的某些部分是在“Price”div下。
  3. 是否可以在左边和正确的价格中进行描述div,而其他信息div总是具有相同的高度而不是固定的,因为我希望那些div的背景在底部没有分开。
  4. 编辑:推送图片以使其更大。

3 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

查看此演示: http://jsbin.com/uhakak/7/edit

首先,您应该将所有内容包装到一个div中,这将使其位于中心位置:

  

和css for it:

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

通过这种方式,您可以将所有内容放在页面的中心。 text-align:center仅适用于文本(内联元素,实际上文本只是内联元素的单独案例)。 Div是块元素,text-align:center不会影响它们。

二。不确定为什么你在右侧有这个div,但是尝试用postion:relative添加隐藏到你的div的溢出,其中包含描述,标题和价格。我觉得没问题。

第三,让两个div具有相同的高度是有点棘手的,但是由于你的观点是简单的背景颜色,你可以为父div设置背景。溢出:隐藏(实际上,因为我可以看到位置:根本不需要相对)。上面的演示应该显示它是如何工作的。我删除了身高:100px;有

答案 2 :(得分: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>