Question

我正在使用Twitter，并使用API提取了所有关注者及其屏幕名称的列表。我正试图在我的网页上以一个漂亮的“网格”显示它们。但是，它目前看起来像这样：

Bad layout

问题发生在此人的屏幕名称太长以至于连续两行时。我不知道为什么它有时会把一个人放在一条线上......

这是我的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>

有人可以帮忙吗？也许有一种方法可以在他们的名字的第一行之后加一个空白行或者如果它长度少于两行呢？

Answer 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;
}

为每行所需的行高增加高度。

Answer 2

尝试这样的事情：

<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的高度应相当于两行文字。

Answer 3

为名称和图像指定固定高度。你的问题将得到解决。

更新您的标记：

<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; }

Answer 4

一个简单的解决方案是删除float:left并替换为display:inline-block，因为您确实需要inline元素（就像class="inline"暗示的那样）。< / p>

inline-block元素自然会与文本基线对齐，这意味着溢出到新行的较长名称会将所有元素的垂直位置向下推，因此最长的人name将确定其他元素的垂直位置。

See demo或以下示例代码：

<强> 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>

内联div导致布局不均匀

4 个答案: