私は、ブートストラップ要素を使ってインタラクティブタグクラウドを作ろうとしています。それは大丈夫ですが、私は周りの上部と左から絶対的な位置を使用して異なるタグを配置したdiv
。下に貼り付けられていますが、これはかなりコードなので、this fiddleもコードで作成しました(注:スニペットはデスクトップ画面の全幅で表示されます)。絶対配置された要素を反応的にするにはどうすればいいですか?
しかし、絶対配置を使用しているため、ブートストラップ列が提供する応答性が失われます。代わりに、複数の単語のタグが複数の行に壊れてしまい、タグが重複してしまうなど、望ましくない動作が発生します。
タグクラウドも同様に反応的にしたいと思っていますが、どうやってそれを行うのかは分かりません。これは、メディアのクエリでこれを行うには、私はかなり頻繁に幅をサンプリングする必要があると思われる。別のアイデアは、ウィンドウの幅に基づいて位置(および多分フォントサイズ)を調整するためにJQueryを使用することでしたが、それは問題を解決しません。
私の最終的な目標は、画面サイズが変更されているときに内部div(つまりタグ)の同じ相対位置を維持することです。ある時点では、列はスタックすることができますが、列のスタックまでは、タグ間の空きスペースを減らしたり、タグのフォントサイズを小さくしても、同じタグレイアウトを維持したいと考えています。どちらの場合も、画面サイズの変更に比例して変更を加えたいと思います。
内部divタグのレイアウトを維持しながら、このタグクラウドを画面サイズの変更に対応させるにはどうすればよいですか?
.tmp{
\t background-color: #000;
\t height: 600px;
}
.tagcloud{
\t font: "Arial Bold";
\t font-weight: bolder;
\t height: 600px;
\t background-color: #202020;
\t position: relative;
\t text-align: center;
\t min-width: 700px;
}
.tagcloud div{
\t position: absolute;
}
.tagcloud a{
\t text-decoration: none;
\t color: inherit;
}
.tagcloud a:hover{
\t text-decoration: underline;
}
.tagcloud .l1{
\t font-size: 80px;
\t cursor: pointer;
}
.tagcloud .l2{
\t font-size: 68px;
\t cursor: pointer;
}
.tagcloud .l3{
\t font-size: 56px;
\t cursor: pointer;
}
.tagcloud .l4{
\t font-size: 44px;
\t cursor: pointer;
}
.tagcloud .l5{
\t font-size: 38px;
\t cursor: pointer;
}
#item1{
\t color: #c9d35f;
\t top: 10px;
\t left: 150px;
}
#item2{
\t color: #09c9b9;
\t top: 210px;
\t left: 440px;
}
#item3{
\t color: #ba612e;
\t top: 410px;
\t left: 310px;
}
#item4{
\t color: #4b7711;
\t top: 275px;
\t left: 130px;
}
#item5{
\t color: #1bb1fc;
\t top: 130px;
\t left: 560px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 tmp"></div>
<div class="col-sm-6 col-centered tagcloud">
<div class="l1" id="item1">
<a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
First Item</a>
</div>
<div class="l2" id="item2">
<a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
Another Item
</a>
</div>
<div class="l3" id="item3">
<a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
Item3
</a>
</div>
<div class="l4" id="item4">
<a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
Item4
</a>
</div>
<div class="l5" id="item5">
<a data-container="body" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="Some text">
Item5
</a>
</div>
</div>
</div>
</div>
"応答性"にしたいと言っているだけでは不十分です。さまざまなサイズと形状のビューポート、特にオーバーラップするタグをどのように解決するかについて、タグクラウドがどのように動作するかを記述する必要があります。私は意見に基づいてこの質問を見ませんが、それは明確さが欠けており、それがそのままでは広すぎます。 – Alohci
@Alohci:注釈をいただきありがとうございます。私は、何を達成しようとしているのかを明確にするためにOPを更新しました – marcman