1

コンテナー div の両側で同じレベルに表示される 2 つの div 要素を含むコンテナー div 要素があります。次の解決策は機能しません。

<div id="result" >
    <div class="right">Update</div>
    <div class="left">delete</div>
</div>

スタイルシートは次のとおりです。

div.left{
position:absolute;
left: 5px;
top:0px;
color: green;
border-style:solid;
border-color: green;
}
div.right{
position:absolute;
right: 2px;
top:0px;
color: red;
border-style:solid;
border-color: red;
}
#result{
position:relative;
width:100%;
border-style:solid;
border-color: blue;
}

container-div の青いマージンには、他の 2 つの div は含まれず、他の 2 つのコンテナーの上に表示されます。

私は何が欠けていますか？ありがとう！

4

4 に答える 4

1

理想的には、 .left および .right div がフローティングされます。

div.left{
    float: left;
    margin: 5px;
    color: green;
    border-style:solid;
    border-color: green;
}

div.right{
    float: right;
    margin: 5px;
    color: red;
    border-style:solid;
    border-color: red;
}
于 2013-04-03T23:35:27.873 に答える
0

あなたが試すことができるのは、float:left を並べて配置しようとしている両方の要素です。

于 2013-04-03T23:31:51.527 に答える
0

基本的にいらない位置を入れています。以下の回答を参照してください

htmlはこちら

<div id="result" >
<div class="right">Update</div>
<div class="left">delete</div>
</div>

cssはこちら

div.left{
left: 5px;
top:0px;
color: green;
border-style:solid;
border-color: green;
float:left;
}
div.right{
right: 2px;
top:0px;
color: red;
border-style:solid;
border-color: red;
float:right;
}
#result{
width:100%;
border-style:solid;
border-color: blue;
float:left;

}

ここでのライブ例。 http://codepen.io/anon/pen/waKrH

これが役に立った場合は、回答としてマークしてください。

于 2013-04-03T23:34:05.057 に答える
0

このフィドルを達成しようとしていますか?

より良い方法は、フローティングを使用して、絶対を相対に変更することです。また、フローティングを使用する場合はoverflow:hidden;、親コンテナーに追加することを忘れないでください。

于 2013-04-03T23:39:59.053 に答える