1

HTMLは

<div class="jfmfs-friend-container">
    <div class="jfmfs-friend  ">
        <input class="friend-checkbox" type="checkbox">
        <img src="/picture">
        <div class="friend-name">Test User</div>
    </div>
</div>

ここでは、3 つの要素すべてをcheckbox, img and friend-name div1 行で実現できます。私は以下を探しています：

  1. チェックボックスと友人の名前は、画像の垂直方向の中央にあります。
  2. フレンド名の div でのワード ラップ
  3. 互いに等距離 (少なくとも 5 ピクセル) のすべての要素。現在、3つすべてが互いに隣接しており、スペースがありません

これが私のCSSです。display:block プロパティの場合に備えて、親 div の css コードを提供しています。

.jfmfs-friend div {
    color:#111111;
    font-size:11px;
    overflow:hidden;
    display:inline-block;
}

div.friend-name  {
    margin-left: 10px;
    vertical-align: middle;
    word-wrap: break-word;
}

.friend-checkbox {
    position: relative;
    vertical-align:middle;
    display: inline-block;
}

#jfmfs-friend-container {
    overflow:scroll;
    overflow-x: hidden;
    -ms-overflow-x: hidden;
    width:100%;
    height:400px;  
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    color: #333;
    font-size: 12px;
}
4

2 に答える 2

2

デモ: http://jsfiddle.net/55twK/

  1. 3 つの要素すべてに設定vertical-align:middleすると、img が失われます。
  2. これで、3 つの要素すべてがインライン要素のように機能し、さらにテキスト div がある場合は、新しい行に折り返すことができます。オプションの 1 つは、幅または最大幅を div に設定することです。
  3. 水平方向のマージンとパディングは、インライン要素に対して適切に機能します。
于 2013-01-14T23:24:34.620 に答える
0

要素を「jfmfs-friend」div の中央に配置するには、次の css を追加する必要があります。

div.jfmfs-friend  {
    text-align: center;
}

「友達の名前」でワードラップを作成するには、幅を設定する必要があります。現在、それはその親のサイズに拡張されます。"friend-name" ダイブまたはその親コン​​テナーの 1 つの幅を設定すると、テキストが要素の端にぶつかったときにテキストが壊れます。

要素を互いに分離するには、目的の効果が得られるまで、パディングとマージンの css プロパティをいじる必要があります。各要素に 5px のパディングを追加すると、おそらく必要なことが行われます。

.friend-checkbox, img, .friend-name {
     padding: 5px;
}

jsfiddle.netを使用してレイアウトを微調整し、ライブ プレビューを取得できます。これにより、必要な間隔を確保できます。

また、パディングとマージンのプロパティに関するこれらの参照も確認してください。

于 2013-01-14T23:29:05.050 に答える