Логика CSS / HTML для создания 4 делений занимает 1/4 пространства и имеет перекрывающиеся границы в 1 пиксель

Question

Логика CSS / HTML для создания 4 делений занимает 1/4 пространства и имеет перекрывающиеся границы в 1 пиксель

0

Вот как выглядит моя тестовая страница: http://jaminweb.com/boardBeta.php

То, что я хотел бы использовать для этой таблицы (созданной с помощью div... Не беспокойтесь, я не использую table) состоит в том, чтобы иметь 4 столбца на одинаковом расстоянии и с перекрывающимися границами 1 белого пикселя (что означает ровно 1 белый пиксель, разделяющий их по горизонтали.. Я понимаю, что установка borders каждого в 1px сделает их 2 пикселя) и занимает всю ширину разделов, в которых они находятся.

Мой 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. Я нахожу это очень неприятным.

Может кто-нибудь объяснить логику того, как добиться желаемого формата?

user3537336 16 апр. 2014, в 21:40

Источник

0

Есть веб-разработчики высшего уровня, которые не знают, как работает позиционирование, поэтому я бы планировал часто путать - и на неопределенный срок. Это должно быть таблица, вероятно. Нет реальной причины использовать их как inline-block, и определенно следует учитывать размер блока.
sheriffderek 16 апр. 2014, в 19:51

Теги:

html

css

3 ответа

0

Вот табличный подход. По крайней мере, вам, вероятно, нужны ваши "списки" сообщений в списках, если не таблица. Это зависит от того, что 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; 
}

sheriffderek 16 апр. 2014, в 18:36

0

У вас проблема с белым пространством, используя отображение встроенного блока. Если вы добавите white-space: nowrap; в div#threads это исправит вашу проблему. Затем вы также можете добавить margin: -5px (ваша граница 5px) к тому же элементу, чтобы граница не была "вне страницы" с правой стороны.

Демо здесь

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

Tricky12 16 апр. 2014, в 17:59

Ещё вопросы

Есть веб-разработчики высшего уровня, которые не знают, как работает позиционирование, поэтому я бы планировал часто путать - и на неопределенный срок. Это должно быть таблица, вероятно. Нет реальной причины использовать их как inline-block, и определенно следует учитывать размер блока.

j08691 · Accepted Answer · 2014-04-16T16-53-00.000Z

Так как ваши ячейки являются встроенными блочными элементами, они чувствительны к пробелу и создают часть проблемы. Поэтому удалите лишнее пустое пространство, а затем добавьте правило box-sizing:border-box в div.threadscol. Установка размера окна в рамку-рамки позволяет включать и дополнять дополнение и границу в вычислении ширины 25%.

Пример jsFiddle

Кроме того, одной альтернативой удалению пробела является установка размера шрифта на родительском объекте равным нулю, а затем увеличение его для данных ячейки.

Пример jsFiddle