CSS - 对齐 div 元素答案

【问题标题】：CSS - Align Div ElementsCSS - 对齐 div 元素
【发布时间】：2013-10-30 00:36:18
【问题描述】：

我正在尝试对齐我的 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 手机上运行的。

如果有人可以帮助我解决其中的一些问题，我将不胜感激！

【问题讨论】：

css,jquery 没问题 html 在哪里？
嗨，Samitha，我已经编辑了我的问题以包含 HTML。虽然 HTML 很空...
您的包含以上屏幕截图的 html 代码在哪里？ jsfiddle.net/SNGQb
我基本上只在加载某些内容时显示加载图像，然后将其隐藏...它在我的Javascript代码中，我没有在这里复制。
那么，你现在需要归档什么？

标签： javascript css html

【解决方案1】：

对于您要添加的每个“行”，在 div 中添加那些假定“行”的元素，这将使您可以对齐文本元素。

<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 是这样的。

【讨论】：

【解决方案2】：

您似乎正在尝试构建一个数据表。对于实际的数据表，使用<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 进行实验。）

【讨论】：

谢谢 cxw。这看起来更简单。我会试一试，然后告诉你。