Question

我有一个包含div，用于创建页面的“用户”部分，用户详细信息（如姓名，年龄等）位于此页面的左上角。我有一个新的要求，其中两个'状态'类型字段需要放在右上角，这里有足够的空间。

我认为所提到的3个字段正在填充所有这些空间，因此新字段位于右侧，但位于下方。

我已经把一个JSFiddle放在一起显示我的问题，浮动权利似乎对我不起作用，我无法解决我出错的地方。我不是最好的CSS。

<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

您需要根据以下内容调整HTML和CSS。

至关重要的是，需要将两个浮动区域封装在单独的div元素中，然后在父级（overflow:hidden;）上设置.user

Demo Fiddle

HTML

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

CSS

.user {
    background-color: #E3E3E3;
    height: 20%;
    margin: 20px 0;
    text-align: left;
    width: 94.5%;
    padding: 10px;
    border-radius: 5px 40px 5px 5px;
    overflow:hidden;
}
.user div:first-child{
    float:left;
}
.user div:last-child{
    float:right;
}

Answer 2

You can try this also this is more preferred:

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

HTML CODE：

<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;
}

CSS将新字段移到右上角

2 个答案:

Demo Fiddle