1

私はTwitterを使用しており、APIを使用してすべてのフォロワーとそのスクリーン名のリストを取得しました。私は自分のWebページの素敵な「グリッド」にそれらを表示しようとしています。ただし、現在は次のようになっています。

レイアウトが悪い

この問題は、人物のスクリーン名が長すぎて2行になる場合に発生します。なぜそれが時々一人の人をそのような列に並べるのか分かりません...

これが私のCSSコードです：

div.inline { 
float:left; 
padding-left: 40px;
padding-bottom: 20px;
text-align: center;
font-family: sans-serif;
width: 90px;
}

そしてHTMLコード：

<div class = "inline">
    <?php echo $userName; ?><br>
    <?php echo "<img src = ".$userImage." class = ".$class.">"; ?><br>
    <select name = "choice">
        <option value = "blank"></option>
        <option value = "cool">Cool</option>
        <option value = "uncool">Uncool</option>
    </select>
</div>

誰か助けてもらえますか？おそらく、名前の最初の行の後に空白行を入れる方法や、2行未満の場合は何かがありますか？

4

4 に答える 4

3

誰かが1行にいる理由は、各divの高さが異なるためです。ユーザー名を要素（たとえばdiv）でラップして高さをそれに設定するか、インラインdiv全体に高さを設定します。ただし、画像を揃えておくと便利だと思うので、最初のオプションが最適です。 

<div class="inline">
    <div class="username"><?=$userName;?></div>
    <?='<img src="'.$userImage.'" class="'.$class.'" alt="'.$userName.'" />';?><br />
    <select name="choice">
        <option value="blank"></option>
        <option value="cool">Cool</option>
        <option value="uncool">Uncool</option>
    </select>
</div>

2行の場合は、次を使用します。

.username { 
   height: 30px;
   line-height: 15px;
}

必要な各行の行の高さの値だけ高さを増やします。

于 2013-03-18T22:08:35.320 に答える
1

次のようなものを試してください。

<div class="inline">
    <div style="height: 32px; line-height: 16px"><?php echo $userName; ?></div><br />
    <img src=" <?php echo userImage; ?> " class=" <?php echo $class; ?> " /><br />
    <select name="choice">
        <option value="blank"></option>
        <option value="cool">Cool</option>
        <option value="uncool">Uncool</option>
    </select>
</div>

divの高さは2行のテキストに相当する必要があります。

于 2013-03-18T22:09:05.137 に答える
0

名前と画像に固定の高さを指定します。あなたの問題は解決されます。

マークアップを次のように更新します。

<div class = "inline">
    <div class="name"><?php echo $userName; ?></div>
    <div class="image"><?php echo "<img src = ".$userImage." class = ".$class.">"; ?></div>
    <select name = "choice">
        <option value = "blank"></option>
        <option value = "cool">Cool</option>
        <option value = "uncool">Uncool</option>
    </select>
</div>

そしてCSSは似たようなものです。

.name { height: 30px; }
.image { height: 200px; }
于 2013-03-18T22:16:57.520 に答える
0

簡単な解決策は、要素を本当に必要としているので、削除float:leftして、に置き換えることです（のヒントのように）。display:inline-blockinlineclass="inline"

inline-block要素はテキストのベースラインに自然に整列します。つまり、新しい行にこぼれる長い名前はすべての要素の垂直位置を押し下げます。したがって、名前が最も長い人が他の要素の垂直位置を決定します。

以下のデモまたはサンプルコード

CSS

div.inline { 
    display:inline-block; 
    padding-left: 40px;
    padding-bottom: 20px;
    text-align: center;
    font-family: sans-serif;
    width: 90px;
}

HTML

<div class="inline">
    short-ish username<br/>
    <img src="http://lorempixel.com/80/100/cats/1"/><br/>
    <select name="choice">
        <option value="blank"></option>
        <option value="cool">Cool</option>
        <option value="uncool">Uncool</option>
    </select>
</div>
<div class="inline">
    name<br/>
    <img src="http://lorempixel.com/80/100/cats/2"/><br/>
    <select name="choice">
        <option value="blank"></option>
        <option value="cool">Cool</option>
        <option value="uncool">Uncool</option>
    </select>
</div>
<div class="inline">
    A really, really long username<br/>
    <img src="http://lorempixel.com/80/100/cats/3"/><br/>
    <select name="choice">
        <option value="blank"></option>
        <option value="cool">Cool</option>
        <option value="uncool">Uncool</option>
    </select>
</div>
<div class="inline">
    Short again<br/>
    <img src="http://lorempixel.com/80/100/cats/4"/><br/>
    <select name="choice">
        <option value="blank"></option>
        <option value="cool">Cool</option>
        <option value="uncool">Uncool</option>
    </select>
</div>
<div class="inline">
    V.short<br/>
    <img src="http://lorempixel.com/80/100/cats/5"/><br/>
    <select name="choice">
        <option value="blank"></option>
        <option value="cool">Cool</option>
        <option value="uncool">Uncool</option>
    </select>
</div>
于 2013-03-18T22:29:11.700 に答える