У меня есть сетка из DIV с фиксированной шириной и границей 1 px. Теперь, когда два DIV касаются друг друга, граница становится 2px, очевидно.
Как я могу получить только 1px-границу во всей сетке?
Вот что я имею в виду:
У меня есть сетка из DIV с фиксированной шириной и границей 1 px. Теперь, когда два DIV касаются друг друга, граница становится 2px, очевидно.
Как я могу получить только 1px-границу во всей сетке?
Вот что я имею в виду:
Может ли помочь скрыть свойство collapse?
Свойство border-collapse устанавливает, сворачиваются ли границы таблицы в одну границу или отделяются, как в стандартном HTML.
Смотрите: http://www.w3schools.com/cssref/pr_border-collapse.asp
table#myTable
{
border-collapse:collapse;
}
Попробуйте следующее:
div.griditem
{
display: inline-block;
border: 1px solid black;
width: 18px;
height: 18px;
margin-left: -1px;
margin-bottom: -1px;
}
Привет, вы определяете свой сетевой контейнер в соответствии с вашим griditem div
как этот
CSS
div.gridcontainer
{
width: 76px;
line-height: 0;
border: solid black;
border-width: 0 1px 1px 0;
}
div.griditem
{
display:inline-block;
border: solid black;
border-width: 1px 0 0 1px;
width: 18px;
height: 18px;
}
HTML
<div class="gridcontainer">
<div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div>
</div>
Демо-версия здесь http://jsfiddle.net/rohitazad/4uPtj/1/
Я использовал компоновку сетки CCS (отображение: сетка)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
container {
width: 100%;
height: 100%;
}
img {
max-width: 100%;
display: block;
}
.grid {
display: grid;
background-color: #000;
border: 1px solid #000;
grid-gap: 1px;
justify-self: center;
max-width: 282px;
height: auto;
margin: 0 auto;
}
.box {
position: relative;
}
.cell::before {
content: "";
position: absolute;
display: block;
border: 10px solid #fff;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.box:hover::after {
content: "+";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
font-weight: bold;
}
.box:hover .cell::after {
content: "";
display: block;
position: absolute;
border: 1px solid red;
left: -1px;
right: -1px;
bottom: -1px;
top: -1px;
}
.cell {
position: relative;
pointer-events: none;
}
.box:hover {
background-color: red;
}
.box:hover .cell::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(255,0,0,0.5);
}
@media only screen and (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
max-width: 563px;
}
}
@media only screen and (min-width: 1024px) {
.grid {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
max-width: 1124px;
}
}
<div class="container">
<div class="grid">
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
</div>
</div>
<style>
.gridcontainer .griditem
{
border : 2px solid rgba(204,204,204,0.8) !important;
margin-left:-1px;
margin-right:-1px;
margin-top: -1px;
margin-bottom: -1px;
}
</style>
Здесь другой способ сделать это без отрицательных полей: http://jsfiddle.net/e5crg405/
div.gridcontainer {
width: 80px;
line-height: 0;
}
div.griditem {
display: inline-block;
border-bottom: 1px solid black;
border-right: 1px solid black;
width: 18px;
height: 18px;
}
div.griditem:nth-child(4n + 1) {
border-left: 1px solid black;
}
div.griditem:nth-child(-n + 4) {
border-top: 1px solid black;
}