2

このサイトで div を 2 つの floats の間に配置する解決策を見つけました。解決策は、二重の境界線があることを除いて正常に機能します。

CSS

.trilink_container {
margin:5px;
overflow: hidden; /* contain floated elements */
}

.trilink_all {
border: 1px solid #CCCCCC;
color: #444444;
text-shadow: 0 1px 1px #F6F6F6;
background: #fdfdfd;
background: -o-linear-gradient(top,  #fdfdfd,  #eee);
background: -ms-linear-gradient(top,  #fdfdfd,  #eee);
background: -moz-linear-gradient(top,  #fdfdfd,  #eee);
background: -webkit-gradient(linear,  left top,  left bottom,  color-stop(0,  #fdfdfd),  color-stop(1,  #eee));
background: -webkit-linear-gradient(#fdfdfd,  #eee);
background: linear-gradient(top,  #fdfdfd,  #eee);
text-align:center;
 }

.trilink_item {
float: left; 
width: 32%;
margin-left:5px;
}

.trilink_right {
float: right; 
width: 32%;
margin-right:5px;
}

.trilink_center {
margin-left: auto;
margin-right: auto;
}

HTML

<div class="trilink_container">

<div class="trilink_item trilink_all">Left Test</div>
<div class="trilink_right trilink_all">Right Text</div>
<div class="trilink_center trilink_all">Centre Text</div>

</div>

jfiddleにもコードを追加しました。

ところで、私は自分のコーディングが少し乱雑であることを認識しており、解決策を見つけたら整理するつもりです :)

何か案は？

4

4 に答える 4

4

overflow: hiddenに(またはauto; 以外のものvisible) を追加.trilink_centerすると、私が信じているものを取得できます (このフィドルを参照)。

これにより、フローの動作を変更する新しいブロック フォーマット コンテキストが確立されます。いくつかの議論については、この記事を参照してください。

于 2013-04-11T19:47:46.453 に答える
1

二重枠を削除したい場合は、marginfromleftとrightdivsを削除するだけです

.trilink_item {
    float: left; 
    width: 32%;
    //margin-left:5px; remove it
    }

.trilink_right {
    float: right; 
    width: 32%;
    //margin-right:5px; remove it
    }

JS フィドルの例

于 2013-04-11T19:48:58.363 に答える
0

`.trilink_center {

 margin-left: auto;
 margin-right: auto;
 /* float left or right
 float: left;

}`

それだけです

于 2013-04-11T19:54:14.127 に答える