CSS - 对齐Div元素

时间:2013-10-29 15:57:23

标签: javascript css html

我正在尝试对齐我的DIV元素,使得我的标题与其对应的值间隔相等。

目前我的输出如下:

我的Javascript如下:

                wrapper.appendTo('body')
                dealTitleDiv.appendTo('#wrapper');
                dealTitleValueDiv.appendTo('#wrapper');

                wrapperOne.appendTo('body')
                dealNameDiv.appendTo('#wrapperOne');
                dealNameValueDiv.appendTo('#wrapperOne');

                wrapperTwo.appendTo('body')
                addressDiv.appendTo('#wrapperTwo');
                addressValueDiv.appendTo('#wrapperTwo');

                wrapperThree.appendTo('body')
                disclaimerDiv.appendTo('#wrapperThree');
                disclaimerValueDiv.appendTo('#wrapperThree');

我的CSS:

body
{
background-color:#5CD65C;
}


#wrapper
{
    width:300px;
}
#dealTitleDiv
{
    width:100px;
    float: left;      
}

#dealTitleValueDiv
{
    width:215px;
    float: right;   
}

#wrapperOne
{
    width:320px;
}
#dealNameDiv
{
    width:100px;
    float: left;
    clear: left;
}

#dealNameValueDiv
{
    width:215px;
    float: right;   
}

#wrapperTwo
{
    width:320px;
}
#addressDiv
{
    width:100px;
    float: left;
    clear: left;
}

#addressValueDiv
{
     width:215px;
    float: right; 
}


#wrapperThree
{
    width:320px;
}

#disclaimerDiv
{
    width:100px;
    float: left;
    clear:left;
}

#disclaimerValueDiv
{
    width:215px;
    float: right; 
}

HTML(不包含太多内容,所以我只是粘贴了正文)

<body>
<div id='loadingDiv2'>
            Please wait...Retrieving Deals  <img src="http://i.stack.imgur.com/FhHRx.gif" />
</div> 


</body>

我似乎无法解决一些问题: 1)为什么“$ 8 Oyster Special”与下面的值不一致。

2)为什么“鱼”出现在“名字”下

3)如何在屏幕上的“免责声明”中保留文字。

这是在我的三星Galaxy S2手机上运行。

如果有人可以帮我解决其中的一些问题,我将非常感激!

2 个答案:

答案 0 :(得分:1)

对于要添加的每个“行”,在div中添加假定为“row”的元素,这样就可以对齐文本元素。

<div id="wrapper">
    <div class="row">
        <div id="dealTitle">Some text</div>
        <div id="dealTitleValueDiv">Some value text</div>
    </div>
    <div class="row">
        ...
        ...
    </div>
</div>

所以你希望结束HTML就像这样。

答案 1 :(得分:0)

看起来您正在尝试构建数据表。对于实际数据表,使用<table>

没有任何问题
<table id="wrapper">
    <tr>
        <td>Deal Title</td>
        <td>$8 Special</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Fish</td>
    </tr>
</table>

然后你需要的唯一的CSS就是

#wrapper {
    width:300px;
}

(请参阅jsfiddle进行实验。)