Слияние границ между DIV

Question

Слияние границ между DIV

0

Ну вот:

<div id="weapons_main">
  <div class="col1">.</div>
  <div class="col1">.</div>
  <div class="clear"></div>
  <div>1</div>
  <div>2</div>
</div>

CSS:

#weapons_main{
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: thin solid #869BBF;
    border-collapse: collapse;
    margin: 0 auto;
    width: 80%;
}

#weapons_main div{
    background-color: #EFF0FB;
    border: solid 5px red;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}
#weapons_main .col1{
    width: 50%;
    float: left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}

http://jsfiddle.net/T3v9u/

проблема видна сразу: красные линии толще, чем нужно, потому что браузер суммирует их, а не объединяет. Как уклониться от этого?

John Smith 18 фев. 2014, в 10:32

Источник

5

Если я понимаю, что вы пытаетесь сделать, почему бы не использовать table s вместо div s?
Ranveer 18 фев. 2014, в 09:07
0

lolololol Мне просто приказали не использовать таблицу, а вместо этого конструкцию div. Но хороший момент.
John Smith 18 фев. 2014, в 09:09

Теги:

html

css

4 ответа

2

Вы можете использовать этот подход:

display: table;

для контейнера и

display: table-row;

для разделов, которые будут содержать содержимое строки и

display: table-cell

для делений ячейки

Ismatjon 18 фев. 2014, в 07:26

1

и чем border-collapse: collapse; собирается на работу.
Ismatjon 18 фев. 2014, в 09:30

1

Для поддержки IE8 вам необходимо использовать :first-child

Образец:

#weapons_main div:first-child {
    border-bottom: 0;
}

LGSon 18 фев. 2014, в 07:51

1

Попробуй это:

#weapons_main
{
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: thin solid #869BBF;
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
    width: 80%;
}

#weapons_main div
{
    background-color: #EFF0FB;
    border-top: solid 5px red;
    border-left: solid 5px red;
    border-right: solid 5px red;
    border-bottom: none;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}
#weapons_main div:last-child
{
    border-bottom: solid 5px red;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}
#weapons_main .col1
{
    border-bottom: solid 5px red;
    width: 50%;
    float: left;
    display: inline-block;
    margin: 0;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}

Ссылка: http://jsfiddle.net/7Yw4C/

#weapons_main .col1:first-child
{
    border-right: none;
}

#weapons_main .col1:last-child
{
    border-left: none;
}

Дополнительно: http://jsfiddle.net/7Yw4C/1/

Jonathan Perada 18 фев. 2014, в 07:50

0

Обновление здесь: jsfiddle.net/7Yw4C/1
Jon P 18 фев. 2014, в 09:28

Ещё вопросы

Если я понимаю, что вы пытаетесь сделать, почему бы не использовать table s вместо div s?
lolololol Мне просто приказали не использовать таблицу, а вместо этого конструкцию div. Но хороший момент.
и чем border-collapse: collapse; собирается на работу.

enyce12 · Accepted Answer · 2014-02-18T08-04-00.000Z

Вы можете работать с :last-child и смежным селектором (+)

#weapons_main div:last-child {
    border-top: 0;
}


#weapons_main .col1 + .col1 {
    border-left: 0;
}

DEMO

Для более продвинутого примера вы можете работать с :nth-child

#weapons_main .col1:nth-child(2n) {
    border-left: 0;
}

DEMO