問題タブ [css-multicolumn-layout]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - オーバーフローするテキストをどのようにスタイルしますか?
動的に入力される列形式の順序付けられていないリストがあり、通常は ごとに 1 つまたは 2 つの単語しか<li>
ありませんが、より長いリスト項目が表示されることがあります。列を保持するために、これらの長い項目の余分なテキストを省略記号で非表示にすることにしました。
しかし、ユーザーにこれらのアイテムへのアクセスを許可したいので、次のようなホバー スタイルを作成しました。
これにより、テキストが列の間のスペースに表示されますが、隣接する に達すると停止します<li>
。ホバリングされているものを優先して<li>
、他のものよりも上に表示され、背景が不透明になるようにします。で遊んでz-index
もうまくいきませんでした。
ここにフィドルがあります:https://jsfiddle.net/9p7qeon2/
html - リストの最後の項目を別の方法で表示する
リストの最後の項目を別の方法で表示するにはどうすればよいですか?
http://www.orafivenetiassociati.ennestudio.net/le-marche/
問題は、最初の 3 つの要素は問題ありませんが、最後の要素が本体の外に出てしまい、小さな画面ではアイテムが表示されないことです。したがって、リスト「Argenti」は 1 つの列に表示する必要があります。
そこで、"Argenti" に CSS の一部を無視させる必要があります。
現時点では、コードのこの部分によって 3 つのサブ列が作成されます。
すべてのコードへのリンクを残しますhttps://jsfiddle.net/1trtbdag/
css - テーブル内の複数列の div: 含む div には最初の列の幅しかありません
複数の列を含む可能性のある別の div の周りに「div」を配置しようとしています。
ただし、ここでわかるように
青色の div のみが最初の列と同じ幅です。この3つをすべて収めたいと思います。
ここで何が欠けていますか?
html - CSS 列の垂直オーバーフローの回避策
比較的固定された div 内で CSS 列を使用して、列のような方法で画像を配置しようとしています。divを垂直にスクロールしたいのですが、利用可能な最大垂直スペースに達すると、右側に新しい列が作成され、意図した3つの列を維持して垂直にオーバーフローするのではなく、divが水平にスクロールされます。それを修正する方法について何か考えはありますか?
css - 順序付けられていないリストがCSSの列数で最初に空白の項目を残すのはなぜですか?
列に分割したい順序付けられていないリストがあるためcolumn-count
、親 div で CSS を使用しています。
ただし、何らかの理由で、これにより最初の列の最初の行に空白行が残ります。
列をきちんと整頓するにはどうすればよいですか?
JSFiddleがあります