0

私はCSSがあまり得意ではありません。私は多くのプロパティを知っていますが、フローティング div やより高度な側面に関しては少し緑です。

意味的に良くないことがわかっている HTML テーブルを使用せずに、このレイアウトを再現したいと考えています。

http://jsfiddle.net/hkCcY/3/

<table class="selection">
<tr>
    <td rowspan="3" class="type">dui</td>
    <td rowspan="3"><img src="holder.js/35x35" /></td>
    <td class="name">Phasellus convallis pellentesque erat</td>
    <td><strong>Quisque:</strong> eu dui vitae</td>
</tr>
<tr>
    <td><strong>Feugiat:</strong> interdum vitae</td>
    <td><strong>Cras:</strong> at mauris eros</td>
</tr>
<tr>
    <td><strong>Vivamus:</strong> id odio mi</td>
    <td><strong>Duis:</strong> tellus sapien</td>
</tr>
</table>

このマークアップを使用したいと思います (または非常に似ています - 提案を歓迎します!):

http://jsfiddle.net/rG2Ea/3/

<div class="selections-item selection-win">
<div class="selection-type">dui</div>
<img class="selection-icon" src="holder.js/35x35" alt="-"/>
<ul class="selection-list">
    <li class="selection-name">Phasellus convallis pellentesque erat</li>
    <li class="selection-attr"><strong>Quisque:</strong> eu dui vitae</li>
    <li class="selection-attr"><strong>Feugiat:</strong> interdum vitae</li>
    <li class="selection-attr"><strong>Cras:</strong> at mauris eros</li>
    <li class="selection-attr"><strong>Vivamus:</strong> id odio mi</li>
    <li class="selection-attr"><strong>Duis:</strong> tellus sapien</li>
</ul>
</div>

しかし、CSS での私の試みの jsfiddle でわかるように、レイアウトはひどいものです。私が抱えている問題は次のとおりです。

  • 選択タイプとイメージの「行スパン」で、コンテナー内で垂直方向に中央揃えになります。
  • リスト項目要素を取得して正しい幅を取得し、それらが互いに重なり合うようにします。表のように各行に2つ欲しい
  • 流動的にする - 親で 100% 幅に拡張する
4

3 に答える 3

2

フロートの学習を開始するための高度なケースを静かにしますが、私はそれを試してみました。

あなたの質問への答えとして：

  • 行スパンは、フロートだけでjsなしでは実際には達成できません。垂直方向の配置は、css では ab*tch です。そのため、アイコンとタイプを配置しましたabsolute。上を 50% に設定し、margin-top を高さの半分に設定することで、それらを垂直方向に中央揃えにしました。左の位置は、ピクセル値をいじるだけの問題です。
  • にパディング左を追加することulで、アイコンとタイプ用のスペースを確保しました。これは、アイコンとタイプを絶対に配置すると、ドキュメントの流れから外れるためです (兄弟はより長く「プッシュ」されます)。は ul非フローティング ブロック レベル要素であるため、親の全幅を自動的に埋めて、必要な 100% 流動的な幅を提供します。
  • 上記の変更により、 は正常にwidth:50%動作しli、必要な 2 つの列が得られます。水平方向のパディングやマージンを追加しないでください。これにより、すべてが 1 つの列に表示されます。

関連する css は次のようになります。

.selection-type {
    text-transform: uppercase;
    width: 50px;
    position: absolute;
    line-height: 35px;
    left: 15px;
    top: 50%;
    margin-top: -17px;
}

img.selection-icon {
    position: absolute;
    height: 35px;
    width: 35px;
    left: 65px;
    top: 50%;
    margin-top: -17px;
}
.selection-list {
    padding-left: 125px;
    overflow: hidden;
}

これが途中で役立つことを願っています。さらに説明が必要な場合は、お気軽にお尋ねください。

于 2013-05-27T22:04:18.583 に答える