1

私はCSSに非常に慣れていないので、要素を「3分の1」に配置する方法を研究しようとかなりの時間を費やして、ウィンドウの寸法が変わっても要素が「3分の1」のままになるようにしています。下の1枚目はブラウザを全開した状態、2枚目は横に縮小した状態です。私はこの方法を探していますが、テクニックの名前や何をすべきかわかりません (私が本当に新しいと言ったように)。タブが「ドアを閉じる」と呼ばれるものを使用していることは承知していますが、それらの配置にもっと興味があります.

ここに画像の説明を入力

ここに画像の説明を入力

たとえば、次のように 3 つの要素を不均等に配置して収縮させたい場合、これを達成するにはどうすればよいでしょうか?

ここに画像の説明を入力

それ以外の：

ここに画像の説明を入力

4

3 に答える 3

2

実際のコードを見なくても、横幅、マージン、およびパディングを相対単位で宣言することをお勧めします。それは、ピクセルではなく、% または ems になります。

だから、あなたの例では、

 #element_2 {
     margin-left: 45%;
  }
  #element_3 {
     margin-left: 5%;
  }

相対単位を使用すると、要素を希望どおりに配置するために、もう少し試行錯誤する必要があります。

于 2012-03-02T17:10:24.943 に答える
2

この解決策を確認してください。これは柔軟性があり、より多くのメニューが来ると自動的に対応します。

http://jsfiddle.net/geymU/

<div id="nav">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Address</li>
    <li>Phone</li>
  </ul>
</div>​

CSS

#nav{
   background:#c1c1c1;
}
#nav ul{
  display:table;
  width:100%;
}
#nav li{
  padding:5px;
  display:table-cell;
  background:#333;
  border:1px solid;
  color:#fff;
}​
于 2012-03-05T13:27:45.937 に答える
0

あなたの写真では、backgroundimage（ボタン全体に広がっていないので画像だと思います）が欠けているだけのように見えます

background-repeat: repeat-x;

ただし、最初のボタンをに設定すると、2番目の例で見たものを簡単にアーカイブできます。

    float: left;

残りのボタンは

    float: right;

忘れないでください

    clear: both;

それらの後で、ドキュメントフローから要素が削除されていない場合に備えて（これはfloatが行うことです）。

于 2012-03-02T17:13:58.820 に答える