0

この設計を実現するために使用する 2 つのセレクターがあります。

私はほとんどすべてを試しましたが、大きな文字のすぐ隣にテキストを浮かせることができないようです

コードは次のとおりです。

ジャスビン

html:

<div class="processlinks-section-template">
<div class="processlinks-section-item" data-letter="H">
    <div class="processlinks-section-item-title">
       <a href="http://aftonbladet.se">Haftonbladet.se</a>
    </div>
    <div class="processlinks-section-item-title">
        <a href="http://teabagz.com">Hteabagz.com</a>
    </div>
</div>

<div class="processlinks-section-item" data-letter="C">
    <div class="processlinks-section-item-title">
       <a href="http://Cftonbladet.se">Cftonbladet.se</a>
    </div>
    <div class="processlinks-section-item-title">
        <a href="http://Cteabagz.com">Cteabagz.com</a>
    </div>
</div>
</div>

CSS:

[data-letter] {
margin:7px;
background:#ef8;
}
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
}
.processlinks-section-template
{
 width: 270px;
 height: 100%;
}
}
.processlinks-section-item-title
{
margin-top:5px;
}
.processlinks-section-item-title a
{
color:black;
}
.processlinks-section-item-title a:visited
{
color:black;
}
.processlinks-section-item-title a:hover
{
color:#0084c9;
}

どんな種類の助けも大歓迎です

注：私は何かを追加するjavascriptを持っているので、これら2つのセレクターをそのまま使用します。

1つでもあるとデザインが崩れそうでそこが問題だと思います。

ご覧ください: jsbin.com/UHiZUJU/9/edit

4

3 に答える 3

1

文字を含む疑似要素と、セクション コンテナーに追加float: leftします。:beforeclear: left

[data-letter]:before {
  content:attr(data-letter);
  font-size:36px;
  margin:7px;
  display:inline-block;
}
.processlinks-section-item {
  clear:left;
}

更新されたJSBin

現在、:before疑似要素はdisplay: blockデフォルトで別のdisplay宣言がない場合、つまり、親の幅を 100% 自動的に埋め、その後に改行があるように機能します (inline要素と比較して)。

要素をフローティングblockすることは、全幅を埋めるという通常の動作ではなく、必要な幅だけを埋めることを意味し、改行の暗黙的な存在も削除します。コンテナのclear: leftは、フロートがセクションごとにリセットされるようにするだけです。

于 2013-10-08T15:22:12.647 に答える