html - CSS 将新字段移动到右上角

Question

我有一个包含 div，它创建了页面的“用户”部分，姓名、年龄等用户详细信息位于该页面的左上角。我有一个新要求，需要将两个“状态”类型的字段放置在右上角有足够空间的地方。

我认为上面提到的 3 个字段填满了所有空间，因此新字段位于右侧，但位于下方。

我整理了一个 JSFiddle 来显示我的问题，向右浮动似乎对我不起作用，而且我无法弄清楚哪里出了问题。我不是最擅长 CSS 的。

http://jsfiddle.net/bxY9X/

<div class="user">
    <p><strong>Name:</strong> Bob </p>
    <p><strong>Age: </strong> 36 </p>
    <p><strong>Height: </strong> 5ft 11 </p>
    <br />

<div class="user2">
    <p><strong>Application Status:</strong>Awaiting Payment</p>
    <p><strong>Insurance Status:</strong>Valid</p>    

    </div>  
    </div>

.user2
{
    background-color: #E3E3E3;
    height: 20%;
    text-align: right;
    width: 95%;
    padding: 10px;
    padding-top: 0px;
}

.user {
background-color: #E3E3E3;
height: 20%;
margin: 20px 0;
text-align: left;
width: 94.5%;
padding: 10px;
border-radius: 5px 40px 5px 5px;
}

Answer 1

You can try this also this is more preferred:

Here is JSfiddle http://jsfiddle.net/bxY9X/5/

HTML 代码:

<div class="user">
    <div class="user1">
    <p><strong>Name:</strong> Bob </p>
    <p><strong>Age: </strong> 36 </p>
    <p><strong>Height: </strong> 5ft 11 </p>
    <br />
    </div>
<div class="user2">
    <p><strong>Application Status:</strong>Awaiting Payment</p>
    <p><strong>Insurance Status:</strong>Valid</p>    

    </div>  
    </div>

CSS 代码:

 .user2
{
    background-color: #E3E3E3;
    height: 20%;
    text-align: right;
float:right;
    padding: 10px;
    padding-top: 0px;
     display:inline-block;
}
.user1
{
    background-color: #E3E3E3;
    height: 20%;
    float:left;
    padding: 10px;
    padding-top: 0px;
    display:inline-block;
}
.user {
background-color: #E3E3E3;
height: 20%;
margin: 20px 0;
text-align: left;
width: 100%;
padding: 10px;
    overflow:hidden;
border-radius: 5px 40px 5px 5px;
}