9

HTML と CSS を使用して 2 列のレイアウトを作成しています。これらの列内には、これらのリスト項目の 1 つがクリックされたときに表示される selectmenu があります。従来の選択オプション メニューのように、この selectmenu をクリックした項目に対して相対的に配置し、その周囲の要素のレイアウトに影響を与えないようにする必要があります。ただし、これは自動提案入力/メニューであるため、従来の選択は使用できません。そのため、相対的に配置された親内のメニュー コンテナーに絶対配置されたアイテムを使用しています。

私が欲しいもの： 列レイアウトで子を絶対位置に配置したリスト

私の問題は、絶対に配置されたアイテムが列の一部であるかのように壊れていることです。これは私が理解していることすべてに反しますposition: absoluteが、仕様の範囲内にあるようです。さらにイライラするのは、ブラウザが意図したとおりに絶対配置されたアイテムを表示することです（親に設定しない限りposition: relative）が、親またはselectmenuに設定する必要がありposition: relativeます（絶対配置されたアイテムとして）対応する要素に隣接して表示されるとは限りません。

私が得るもの： ここに画像の説明を入力

フレックスボックスを使用して列のようなレイアウトも試しましたが、これを使用すると、従来の列レイアウトのように、アイテムを上から下に順番に表示する必要がある場合に、アイテムが左から右に表示されます。でフレックスボックスを使用できますflex-flow: column wrapが、コンテナ要素の高さを知る/設定する必要がありますが、これはできません。CSS 列は、高さを設定しなくてもリストを適切にラップします。

最も簡単な解決策は、コンテナの高さを明示的に設定せずに、どういうわけか絶対配置を偽造するか、フレックスボックスにアイテムを順番に（上から下に）表示させることだと思います。どちらも試してみましたが、満足のいく結果は得られませんでした。私は JavaScript ソリューションを使用することにオープンですが、それを避けて CSS のみでこれを解決するために最善を尽くしています。

.columns-two {
  column-count: 2;
  column-width: 300px;
  -moz-column-count: 2;
  -moz-column-width: 300px;
}
.parent {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  position: relative;
}
.highlight {
  background-color: #FFF8DC;
}
.absolute-element {
  width: 200px;
  position: absolute;
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 15px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
<ul class="columns-two">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li class="parent highlight">item that shows selectmenu
    <div class="absolute-element">This is an absolute element. This is an absolute element. This is an absolute element. This is an absolute element. This is an absolute element. This is an absolute element. This is an absolute element. This is an absolute element.This is an absolute
      element. This is an absolute element. This is an absolute element. This is an absolute element.</div>
  </li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

これは、私の問題を示す例を含むコードペンです。HTML から親クラスを削除して、アイテムが意図したとおりに絶対配置されるようにします (これにより、配置が正しくない場合があることに注意してください)。

4

4 に答える 4

0

選択メニューを の中に絶対に配置して<li>をに設定できますか? 私の知る限り、これはこの効果を達成する標準的な方法です。position: relative;<li>

それで：

.selectMenu {
    position: absolute;
    top: /* height of li element */;
    left: 0;
}
于 2016-07-19T16:19:29.567 に答える
-1

プロパティマージンが必要な場合は、 に設定position:relativeし、サブメニューを配置します。ul

于 2017-01-10T08:38:17.773 に答える