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

下面是我的测试页面现在的样子：

我希望该表（使用div创建…别担心；我没有使用

表

）的是4列，每个列的间距相等，并且有1个白色像素的重叠边框（这意味着正好有一个白色像素将它们水平分开..我知道将它们的

边框

设置为

1px

将使两个像素分开）并占据它们所在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>

头衔

创造者

上次投寄时间/日期

员额数目

福

乔

11:49/4/16/2013

0

酒吧

杰克

11:34/4/16/2013

0

当我将

宽度

更改为

25%

时，列会被推到下一行。我知道这是因为边框，但即使我将

边框

更改为

0px

，也会发生这种情况。因此，我不知道这里发生了什么

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

---

有人能解释一下如何实现我想要的格式的逻辑吗？

因为你的单元格是内联块元素，它们对空格很敏感，这是部分问题的原因。所以请删除多余的空格，然后将

框大小：边框框

规则添加到

div.threadscol

divs中。设置t“框大小到边框”框允许在25%宽度计算中包含填充和边框

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

---

您在使用内联块显示时遇到空白问题。如果您将

空白：nowrap；

添加到

div#threads

中，这将解决您的问题。然后您还可以将

边距：-5px

添加到同一元素中，以防止边框在右侧“脱离页面”

---

这是一个表格方法。至少，如果不是表格，你可能希望你的帖子“列表”在列表中。这取决于CMS是如何吐出你的信息的。如果你是新手，我鼓励你从正确的角度出发，想想这在手机上会是什么样子。Stackoverflow有一个不错的手机版本

HTML

---

有一些顶级的web开发人员不知道定位是如何工作的，所以我会计划经常困惑——而且是无限期的。这实际上应该是一个表。没有真正的理由将它们作为内联块，并且肯定会涉及到框大小。

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

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

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