1

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

布局不好

当此人的屏幕名称太长以至于它连续两行时，就会出现此问题。我不知道为什么有时会像这样把一个人放在一条线上……

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

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

4

4 回答 4

3

有人在单行的原因是因为每个 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 的高度应该等于两行文本。

于 2013-03-18T22:09:05.137 回答
0

A simple solution is to remove float:left and replace with display:inline-block, since you really do want inline elements (as kind of hinted at with your class="inline").

inline-block elements will naturally align to the text baseline, which means that longer names that spill onto new lines will push the vertical position of all elements down, therefore the person with the longest name will determine the vertical positioning of the other elements.

See demo or example code below:

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 回答
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 回答