Размещение divs горизонтально, чтобы они частично перекрывались

Я хотел бы иметь таблицу элементов (изображений), расположенных горизонтально, и чтобы элементы частично перекрывались, чтобы сохранить некоторое пространство.Размещение divs горизонтально, чтобы они частично перекрывались

Я попытался решить это с помощью CSS. Вот мой код,

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      div.tableel 
      { 
       height : 100px; 
       width : 100px; 
     display: table-cell; 
       position: relative; 
      } 
     div.tableel ~ div.tableel 
     { 
     left: -30px; 
     font-size: 24pt; 
     } 
     div.row 
     { 
     display: table-row; 
     } 
     div.table 
     { 
     display: table; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="table"> 
      <div class="row"> 
       <div class="tableel" style="background-color: red;"> 
      reg 
       </div> 
       <div class="tableel" style="background-color: blue;"> 
      ge 
       </div> 
       <div class="tableel" style="background-color: yellow;"> 
      rg 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

То, что я не понимаю, почему шрифт установлен правильно, но третий элемент не смещается влево, как я бы ожидать.

Спасибо!

источник

2015-10-23 gramuc

Не забудьте отметить ответ, если мы помогли вам решить проблему! – calcazar

То, что я не понимаю, почему шрифт установлен правильно, но третий элемент не смещается влево

Оно сдвинуто точно как вы намеревались.

Причина вы не в состоянии видеть это происходит потому, что, когда второй div сдвигается влево, он создает разрыв между собой и третьим, который в настоящее время засыпана третью.

Эта скрипка поможет вам увидеть это: http://jsfiddle.net/abhitalks/byayxob0/

Если вы хотите придерживаться делать это так, то вы должны будете получить последний div двигаться влево, вдвое превышающую сумму:

div.tableel:last-child { left: -60px !important; }

Смотрите здесь: http://jsfiddle.net/abhitalks/byayxob0/1/

Но, это будет проблемой для вас, если у вас есть неопределенное число div с. Вам нужно будет изменить свойство left, которое CSS не может сделать для вас.

Тем не менее, более простой способ сделать то, что вы хотите, будет просто держать div сек инлайн, а затем использовать отрицательные поля для контроля перекрытия.

Demo Fiddle: http://jsfiddle.net/abhitalks/4gaotuwL/

Demo Отрывок:

div.tableel { 
 
    height: 100px; width: 100px; 
 
    display: inline-block; 
 
} 
 
div.tableel:nth-child(1) { background-color: rgba(255,0,0,0.5); } 
 
div.tableel:nth-child(2) { background-color: rgba(0,0,255,0.5); } 
 
div.tableel:nth-child(3) { background-color: rgba(255,255,0,0.5); } 
 
div.tableel:not(:first-child) { 
 
    margin-left: -10px; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
     <div class="tableel">reg</div> 
 
     <div class="tableel">ge</div> 
 
     <div class="tableel">rg</div> 
 
    </div> 
 
</div>

источник

2015-10-23 11:23:41 Abhitalks

Спасибо. Отличный ответ. На самом деле количество элементов изменяется динамически, поэтому я думаю, что только CSS не будет этого делать. – gramuc

@gramuc: встроенные отрицательные поля были бы самыми легкими для вас, так как это не только упростит разметку и CSS, но также будет обрабатывать динамическое количество элементов. См. Вторую часть моего ответа. – Abhitalks

Это потому, что второй элемент перемещается на 30 пикселей влево, так что он будет на 30 пикселей дальше от третьего элемента, а затем, когда вы перемещаете 3-й элемент 30px влево, он просто закрывает зазор, который вы сделали. Если вы хотите переместить 3-й элемент, чтобы наложить второй на 30px, вам нужно будет переместить его 60px, чтобы догнать его и наложить на него.

источник

2015-10-23 10:57:59 gaynorvader

с положением: относительный Я бы ожидал, что он сдвинется влево относительно позиции, которую он имел бы в противном случае. – gramuc

'position: relative' перемещает элементы, из которых они будут помещены в DOM, если не было применено позиционирование. Поэтому, если вы переместите их «30px» влево, они перемещаются от того места, где они были бы рядом друг с другом, прежде чем произойдет какое-либо другое движение. – gaynorvader

Вы должны сделать left: -60px; третьему элементу, чтобы перейти -30px влево, потому что второй элемент -30px слева.

источник

2015-10-23 11:01:32

.table { 
 
    width: 300px; 
 
    table-layout: fixed; 
 
    display: table; 
 
} 
 
.tableel { 
 
    height: 100px; 
 
    width: 100px; 
 
    display: table-cell; 
 
    position: relative; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 
.default .tableel ~ .tableel { 
 
    left: -30px; 
 
} 
 
/* I just moved the second block*/ 
 

 
.scene-1 .tableel:nth-child(2) { 
 
    left: -30px; 
 
} 
 
.scene-2 .tableel:nth-child(2) { 
 
    left: -30px; 
 
} 
 
/* I also moved the third block - but 60pixels. (as 30pixel will move it beside 2nd block*/ 
 

 
.scene-2 .tableel:nth-child(3) { 
 
    left: -60px; 
 
}

<h2>Your code</h2> 
 
<div class="table default"> 
 
    <div class="row"> 
 
    <div class="tableel" style="background-color: rgba(255,0,0,0.7);"> 
 
     reg 
 
    </div> 
 
    <div class="tableel" style="background-color: rgba(0,255,0,0.7);"> 
 
     ge 
 
    </div> 
 
    <div class="tableel" style="background-color: rgba(0,0,255,0.7);"> 
 
     rg 
 
    </div> 
 
    </div> 
 
</div> 
 
<h2>Scene 1</h2> 
 
<div class="table scene-1"> 
 
    <div class="row"> 
 
    <div class="tableel" style="background-color: rgba(255,0,0,0.7);"> 
 
     reg 
 
    </div> 
 
    <div class="tableel" style="background-color: rgba(0,255,0,0.7);"> 
 
     ge 
 
    </div> 
 
    <div class="tableel" style="background-color: rgba(0,0,255,0.7);"> 
 
     rg 
 
    </div> 
 
    </div> 
 
</div> 
 
<h2>Scene 2</h2> 
 
<div class="table scene-2"> 
 
    <div class="row"> 
 
    <div class="tableel" style="background-color: rgba(255,0,0,0.7);"> 
 
     reg 
 
    </div> 
 
    <div class="tableel" style="background-color: rgba(0,255,0,0.7);"> 
 
     ge 
 
    </div> 
 
    <div class="tableel" style="background-color: rgba(0,0,255,0.7);"> 
 
     rg 
 
    </div> 
 
    </div> 
 
</div>

источник

2015-10-23 11:20:06

UPDATE Если у Вас есть неизвестное количество дивы и хотел, чтобы сделать это работать независимо от сколько у вас div, не указывая приращение левых значений, я предлагаю использовать отрицательный запас.

Просто изменить:

  div.tableel { 
      height : 100px; 
      width : 100px; 
      display: table-cell; 
      position: relative; 
     }

Для этого:

  div.tableel { 
      height : 100px; 
      width : 100px; 
      display: inline-block; 
      position: relative; 
     }

, а затем дают блоки отрицательный запас, заменив это:

 div.tableel ~ div.tableel 
    { 
    left: -30px; 
    font-size: 24pt; 
    }

к этому:

  div.tableel { 
      font-size: 24pt; 
      opacity: 0.5; 
      margin-left: -30px; 
     }

Так что смотрите на код и различные ответы; Я думаю, что вы запутались на

 div.tableel ~ div.tableel 
    { 
     position: relative; 
    left: -30px; /* <------------------This */ 
    font-size: 24pt; 
    }

левый: -30px часть.

Глядя на ваши 3 коробки. У вас есть Box № 1, 2 и 3. На основе вашего селектора; Вы перемещаете коробку 2 влево -30px и перемещаете поле №3 влево на -30px.

При перемещении первого окна слева на -30px; вы создаете зазор между коробкой 2 и 3 коробки из 30px:

Это означает, что Box 3 потребности -30px, чтобы закрыть этот пробел. и дополнительный -30px перекрываться так боксировать 3 должно быть -60px для этой работы:

-30px:

-60px:

Таким образом, в короткий. Я бы заменил эту часть вашего кода:

 div.tableel ~ div.tableel 
    { 
    left: -30px; 
    font-size: 24pt; 
    }

с этим упрощенным затруднительным:

div.tableel{ 
    font-size: 24pt; 
    } 
    div.tableel:nth-child(2){ 
    left: -30px; 
    } 
    div.tableel:nth-child(3){ 
    left: -60px; 
    }

Вот Fiddle: https://jsfiddle.net/8uhnwhwt/

источник

2015-10-23 11:50:07 calcazar

Размещение divs горизонтально, чтобы они частично перекрывались

ответ

Смежные вопросы