10

私のウェブサイトには、メニューとして機能するアイテムのリストを含むdivがあります。width:autoメニュー項目が長すぎる場合にサイズが変更されるようにCSSを設定しました。ただし、現時点では、これは右側に拡張され、残りのコンテンツも右側に「プッシュ」されます。

これを説明するのは難しいので、例としてhttp://redsquirrelsoftware.co.uk/にアクセスし、[サポート]メニュー項目をクリックすると、コンテンツがプッシュされているのを確認できます。私がしたいのは、divがメニューの左側の空白に拡大することです。

現時点でdiv用に持っているCSSは次のとおりです。

.sidebar1 {
    float: left;
    width: auto;
    min-width: 25%;
    max-width: 29%;
    margin-top: 65px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 12px;
}

他の方法で拡張する方法はありますか？前もって感謝します。

4

2 に答える 2

14

フロートや絶対配置を使用せずにこれを行う別の方法はdirection: rtl、親で使用してから、子でリセットすることです。

.parent { direction: rtl; }
.parent > * { direction: ltr; }
.child { width: 200px; }
.child:hover { width: 400px; }

コードペン: http://codepen.io/heisters/pen/gMgboJ

（申し訳ありませんが、リンクが無効になっているように見えるため、OPのサイトに基づいて例を作成できませんでした）。

于 2016-06-23T21:37:23.767 に答える
3

このアイデアはテストが必要ですが、少なくとも Chrome では機能します。

  • .contentと.sidebar1をfloat: rightの代わりに変更しfloat: leftます。
  • HTML では、 の.sidebar1後に移動し.contentます。
于 2012-09-26T11:38:14.670 に答える