Question

这是我的测试页面现在的样子：http://jaminweb.com/boardBeta.php

我对那张桌子的喜欢（用div创建的......别担心;我不使用table）就是让4个柱子每个等距离并且具有1个白色像素的重叠边框（意味着正好有1个白色像素将它们水平分开..我们理解将每个borders设置为1px将使2个像素分开它们并且占用它们所在的div的整个宽度。

我的CSS：

div.threadsrow:nth-of-type(2n+0)
{
    background-color: #ccc;  
}

div.threadsrow:nth-of-type(2n+1)
{
    background-color: #F9C624;    
}

div#threads
{
    width: 100%;  
    border: 5px solid #333;
    padding: 0px;
}

div.threadscol
{
    display: inline-block; 
    width: 24%;
    margin: 0px;
    border: 1px solid #fff;
    text-align: center;
}

我的HTML：

    <div id="threads">
        <div class="threadsrow">
            <div class="threadscol"><p><b>Title</b></p></div>
            <div class="threadscol"><p><b>Creator</b></p></div>
            <div class="threadscol"><p><b>Last Post Time/Date</b></p></div>
            <div class="threadscol"><p><b>Number of Posts</b></p></div>
        </div>
        <div class="threadsrow">
            <div class="threadscol"><p>Foo</p></div>
            <div class="threadscol"><p>Joe</p></div>
            <div class="threadscol"><p>11:49/4/16/2013</p></div>
            <div class="threadscol"><p>0</p></div>
        </div>
        <div class="threadsrow">
            <div class="threadscol"><p>Bar</p></div>
            <div class="threadscol"><p>Jack</p></div>
            <div class="threadscol"><p>11:34/4/16/2013</p></div>
            <div class="threadscol"><p>0</p></div>
        </div>          
    </div>

当我将width更改为25%时，列会被推到下一行。我理解这是因为边界，但即使我将border更改为0px也会发生这种情况。所以我不是这里发生的事情。

我知道这听起来很可怜，但我已经成为入门级网络开发人员2个月了，我仍然对HTML和CSS的逻辑感到困惑。我发现它非常令人沮丧lol。

有人可以解释一下如何完成我想要的格式的逻辑吗？

Answer 1

由于您的单元格是内联块元素，因此它们对空白区域很敏感，而这会导致部分问题。因此，请删除多余的空格，然后将box-sizing:border-box规则添加到div.threadscol div。将box-sizing设置为border-box允许填充和边框包含在25％宽度计算中。

<强> jsFiddle example

此外，删除空格的一种替代方法是将父级上的字体大小设置为零，然后为单元格数据增加它。

jsFiddle example

Answer 2

使用内联块显示您遇到了空白问题。如果您将white-space: nowrap;添加到div#threads，这将解决您的问题。然后，您还可以将margin: -5px（您的边框为5px）添加到同一元素，以防止边框在右侧“离页”。

Demo here

div#threads {
    width: 100%;
    border: 5px solid #333;
    margin: -5px;
    padding: 0px;
    white-space: nowrap;
}

Answer 3

这是一种表格方法。至少，你可能想要你的＆＃34;列表＆＃34;列表中的帖子，如果不是表格。这取决于CMS正在吐出你的信息。如果您对此不熟悉，我会鼓励您从右脚开始思考如何在手机上观看。 Stackoverflow有一个很好的手机版本。

jsFiddle

HTML

<div class="table-w">

    <table class="your-table">
        <tr>
            <th>Title</th>
            <th>Creator</th>
            <th>Last Post Time/Date</th>
            <th>Number of Posts</th>
        </tr>
        <tr class="row">
            <td>Foo</td>
            <td>Joe</td>
            <td>11:49/4/16/2013</td>
            <td>0</td>
        </tr>
        <tr class="row">
            <td>Bar</td>
            <td>Jack</td>
            <td>11:34/4/16/2013</td>
            <td>0</td>
        </tr>          
    </table>

</div>

CSS

.table-w {
    border: 3px solid black
}

.your-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid white;
}

.your-table th {
    text-align: left;
    background-color: #F9C624;
}

.your-table th, .your-table td {
    width: 25%;
    padding: .5em;
    border: 1px solid white;
}

.row {
    background-color: lightgray;
}

.row:nth-of-type(odd) {
    background-color: #F9C624; 
}

用于制作4个div的CSS / HTML逻辑占据空间的1/4并具有1像素重叠边界

3 个答案:

HTML

CSS