1

2 つの div を隣り合わせに配置する方法。そのうちの 1 つが両方の div のコンテナの中央に配置されます。

2 番目の div を最初の div のすぐ隣に配置し、右側に展開するにはどうすればよいですか?

ここに例があります：

http://jsfiddle.net/Dpcq4/3/

HTML:

<div id="container" >
    <div id="div1"> </div>
    <div id="div2"></div>
</div>

CSS:

  #container{ width: 100%;
              display:inline;
              height:60px;
              color:#000;
    }
    #div1{ margin-left:auto;
           margin-right:auto;
           width:200px;
           height:50px;
           background-color:#333;
    }
    #div2{ float:right;
           width:100%;
           height:50px;
           background-color:#ccc;
    }

ありがとう。

4

6 に答える 6

2

これをチェックしてください：http://jsfiddle.net/GTduji/2/

#container{ 
    width: 600px; 
    height:60px; 
    border:1px solid #bbb;
    text-align:center;
}

コンテナ要素の幅を固定する必要があり、そのコンテンツを中央に配置したいとします。

#div1{        
    width:60%;
    display:inline-block;
    height:50px;     
    background-color:#333; 
}

div1 は % 幅または固定である可能性がありますが、インライン ブロックである必要があります。

#div2{        
    display:inline-block;
     width:10%; 
    height:50px; 
    background-color:#ccc; 
    margin-right:0;    
    position:absolute;    
}

div2にインラインブロックと絶対位置を使用すると、中央のdiv1の後にぶら下がります。

于 2013-03-20T21:58:03.383 に答える
0

float:leftあなたに与えて、div1これを確認してください：

width(div1) + width(div2) <= width(Screen)

したがって、div2残りのスペースを使用する必要があるため、両方の div にパーセンテージ幅を指定します。つまり、div1 に 30% 幅、div2 に 70% 幅を指定します。

このフィドルを参照してください

アップデート：

div1を常に の中心にしたい場合は#container、 を与え、それleft:50%に応じて を調整します。div2

それがあなたが望むものなら、このフィドルを見てください。

于 2013-03-20T21:39:26.530 に答える
0

私の方法は、他のすべてのブラウザーと一緒に ie8 以降で動作し、厳密に css を使用します。
display:table を使用してから、その子に display:table-cell を使用すると、2 つの要素が同じテーブル行に保持されます。

#container{ 
   width: 100%; 
   display:table; 
   height:60px; 
   color:#000;
}
#div1{
   margin-left:auto; 
   margin-right:auto; 
   width:200px; 
   height:50px; 
   background-color:#333;
   display:table-cell; 
}
#div2{
   display:table-cell;
   height:50px; 
   background-color:#ccc; 
   margin-right:0;
   float:left;
   width:100%; 
}

http://jsfiddle.net/Dpcq4/13/

于 2013-03-20T22:03:55.983 に答える
0

margin: auto を使用して別の div 内で div を中央に配置すると、含まれている div の幅全体を使用していることを意味します。指定した幅を指定した別の div 内に div1 を配置し、その中に div1 をフロートします。

<div id="container" >
  <div class="container">
    <div id="div1"> </div>
  </div>
  <div id="div2"></div>
</div>

.container{
  width: x%;
  float: left;
 }

#div2{
 float: left;
}
于 2013-03-20T21:41:16.807 に答える
0

これが私が知っている方法です。他の誰かが私たちにもっと良い方法を教えてくれるかもしれません。

まず、このようにCSSで幅をハードコーディングします

#container{ 
    width: 600px; 
    height:60px; 
    color:#000;
}
#div1{
    float: left;
    width:200px; 
    height:50px; 
    background-color:#333; 
    margin-left: 200px;
}
#div2{
    float:left; 
    width:200px; 
    height:50px; 
    background-color:#ccc; 
    margin-right:0;
}

これがオプションではない場合、そしておそらくそうではないだろうと確信している場合、別の解決策はjavascriptを使用することです. この例では jquery を使用します。

var container = $('#container1');
var div1 = $('#div1');

div1.css('margin-left', container.width()/2-div1.width());

http://jsfiddle.net/Dpcq4/9/

于 2013-03-20T21:48:50.650 に答える
0

左側に空白が必要ないと仮定すると、削除する必要がmargin-left:auto;ありmargin-right:auto;、幅#div1.も変更する必要があります。#div2

このようなもの：

#div1{
    width:200px; 
    height:50px; 
    background-color:#333; 
    float:left;
}
#div2{
    width:75%; 
    height:50px; 
    background-color:#ccc; 
    margin-right:0; 
    float:left;
}

ただし、これが流動的であることを意図している場合は#div1、幅もパーセンテージに変更します。のようなものwidth:25%;; 2 つの div の左側に空白を配置する場合は、左側に div を追加して列として機能させる必要があります。

http://jsfiddle.net/Dpcq4/12/

于 2013-03-20T21:44:38.660 に答える