html - CSS收件箱问题

Question

我正在尝试使用 css 创建一个消息收件箱。收件箱包括 2 个用于收件人的跨度和一个用于主题的跨度。如果收件人姓名超过跨度的宽度，我使用溢出隐藏来隐藏任何字符。当收件人字符增加时会出现问题，它将主题跨度推得更远。我想让主题跨度框保持在它的位置。如何才能做到这一点？

感谢你们对我的帮助

见 Jsfiddle：http: //jsfiddle.net/QaQAv/

html

  <link rel="stylesheet" href="css/float.css">



 <div class="box15">

 <span class="username"> Hello HelloHelloHello</span>
 <span class="description">Hello</span><input type="checkbox" name="" value="" class="id_check">
 <p>
 <span class="username">Hello</span>
 <span class="description">Hello</span><input type="checkbox" name="" value="" class="id_check">
 <p>
 <span class="username">Hello</span>
 <span class="description">Hello</span><input type="checkbox" name="" value="" class="id_check">
 <p>
 </div>

css

.box15 {background-color: #71ECA0;height:480px;width: 500px;position: absolute;left: 450px;top: 230px; }
.username {background-color: #7EBA00;height:23px;width: 130px;position: relative;left: 10px;top: 10px;font-size:21px;font-family:Garamond;color: #090E13;overflow:hidden;}
.description {background-color: #7EBA00;height:23px;width: 290px;position: relative;left: 150px;top: 9px;font-size:21px;font-family:Garamond;color: #090E13;overflow:hidden;}
.id_check {background-color: #F6E49C;position: relative;left: 370px;top: 7px;}

Answer 1

这看起来像是一个简单的表格实际上更有意义的情况 - 我倾向于将电子邮件收件箱视为表格数据。添加<colgroup>元素，以便您可以在一处定义列宽：

<table class="inbox">
    <colgroup>
        <col />
        <col class="sender" />
        <col class="subject" />
    </colgroup>
    <thead>
        <tr>
            <th>
                <input type="checkbox" />
            </th>
            <th>
                Sender
            </th>
            <th>
                Subject
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>
                foo@bar.tld
            </td>
            <td>
                You won some moneys!
            </td>
        </tr>
    </tbody>
</table>

还有一些简单的 CSS 规则让它看起来更好看：

table.inbox
{
    border: solid 1px #f5f5f5;
    padding:5px;
    width: 100%;
}

.sender
{
    width: 15em;
    text-align: left;
}

th
{
    text-align: left;
    background: #f2f2f2;
    padding: 5px;
}

.subject
{
    min-width: 20em;
}

td
{
    padding: 5px;
}

演示：http: //jsfiddle.net/pXkyB/

使用表格的一个优点是，还有很多 JavaScript 插件可以让对行进行排序和重新排列列变得很简单；jqGrid 是第一个想到的。

Answer 2

使用 div 而不是跨度。跨度是内联元素。没有宽度或高度影响跨度的大小。您错误地使用了 p 元素。还要在输入标签中关闭 > 之前添加 / 。另外我建议您使用相对宽度值而不是精确值。 http://jsfiddle.net/QaQAv/6/

<div class="box15">

 <div class="username"> Hello HelloHelloHello</div>
 <div class="description">Hello</div>
 <div class="checkMe"><input type="checkbox" name="" value="" /></div>
 <div class="clear"></div>
 <div class="username">Hello</div>
 <div class="description">Hello</div>
 <div class="checkMe"><input type="checkbox" name="" value="" /></div>
 <div class="clear"></div>
 <div class="username">Hello</div>
 <div class="description">Hello</div>
 <div class="checkMe"><input type="checkbox" name="" value="" /></div>
 <div class="clear"></div>
 </div>