CSS-對齊Div元素

Question

我正在嘗試將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）如何將文本保留在屏幕上的“免責聲明”中。

這是在我的Samsung Galaxy S2手機上運行的。

如果有人可以幫助我解決其中一些問題，我將不勝感激！

Answer 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像這樣。

Answer 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進行實驗。）

CSS-對齊Div元素

問題描述

2 個解決方案

解決方案1
1 2013-10-29 16:07:09

解決方案2
0 已采納 2013-10-29 16:36:18

CSS-對齊Div元素

問題描述

2 個解決方案

解決方案1 1 2013-10-29 16:07:09

解決方案2 0 已采納 2013-10-29 16:36:18

解決方案1
1 2013-10-29 16:07:09

解決方案2
0 已采納 2013-10-29 16:36:18