Как сделать так, чтобы блоки не ехали?

207

10 декабря 2016, 10:32

Есть скрытый контент, который появляется в блоке при ховере на родителя. Так же есть некоторый padding который тоже появляется при наведении. Вследствие чего, сдвигаются другие блоки. Как сделать так, чтобы они не уезжали? Скрин ниже.

Пример одного блока:

.content .hides { 
	display: none; 
} 
.hides { 
	position: relative; 
} 
.hides .fa-shopping-basket { 
	background-color: #f15927; 
	padding: 5px 10px; 
	border-radius: 3px; 
	color: #fff; 
	margin-left: 23px; 
	font-size: 15px; 
} 
.itempos { 
	margin-top: 20px; 
	margin-bottom: 40px; 
} 
.hides:hover { 
	display: block; 
} 
.itempos:hover .hides { 
display: block; 
} 
.itempos:hover { 
	border: 3px solid blue; 
	padding-left: 0; 
	padding-right: 0; 
} 
.itempos:hover .itemcont { 
	padding: 15px; 
}

<div class="col-md-2 itempos"> 
  <div class="itemcont"> 
    <div class="image"> 
      <img class="img-responsive" src="img/pos1.png" alt=""> 
    </div> 
    <a href="" class="name">Диск сцепления ClutchNet (6-ти лепестковая металлокерамика с демпфером)</a> 
    <a href="" class="category">Трансмиссия </a> 
    <div class="price">8 600 руб. <span>9900 руб.</span> 
    </div> 
    <div class="hides"> 
      <a class="podr" href="">Подробнее</a> 
      <a class="crt" href=""><i class="fa fa-shopping-basket fa-1x" aria-hidden="true"></i></a> 
    </div> 
  </div> 
</div>

Answer 1

html { 
  font-family: sans-serif; 
  font-size: .9em; 
} 
body { 
  padding: 15px; 
} 
.title { 
  margin: 0 0 15px; 
  font-size: 1.5rem; 
} 
.entry-list { 
  margin: 0 -10px; 
  padding: 0; 
  display: flex; 
  flex-wrap: wrap; 
  width: 330px; 
  list-style: none; 
} 
.entry-list_i { 
  margin: 0 0 15px; 
  padding: 0; 
  width: 33%; 
} 
.entry { 
  padding: 10px; 
  position: relative; 
  border: 1px solid transparent; 
  border-bottom: none; 
} 
.entry_title { 
  margin: 0 0 10px; 
  font-size: 1.2rem; 
} 
.entry_hidden { 
  padding: 0 10px 10px; 
  position: absolute; 
  left: -1px; 
  right: -1px; 
  display: none; 
  box-sizing: border-box; 
  background: #fff; 
  border-width: 1px; 
  border-style: solid; 
  border-color: inherit; 
  border-top: none; 
} 
.entry:hover { 
  z-index: 10; 
  border-color: #66aacc; 
} 
.entry:hover .entry_hidden { 
  display: block; 
}

<section> 
  <h1 class="title">Item List</h1> 
  <ul class="entry-list"> 
    <li class="entry-list_i"> 
      <article class="entry"> 
        <h2 class="entry_title">Item #1</h2> 
        <p>Description</p> 
        <a href="#">Link</a> 
        <div class="entry_hidden"> 
          <p>Hidden block</p> 
          <a href="#">Hidden link</a> 
        </div> 
      </article> 
    </li> 
    <li class="entry-list_i"> 
      <article class="entry"> 
        <h2 class="entry_title">Item #2</h2> 
        <p>Description</p> 
        <a href="#">Link</a> 
        <div class="entry_hidden"> 
          <p>Hidden block</p> 
          <a href="#">Hidden link</a> 
        </div> 
      </article> 
    </li> 
    <li class="entry-list_i"> 
      <article class="entry"> 
        <h2 class="entry_title">Item #3</h2> 
        <p>Description</p> 
        <a href="#">Link</a> 
        <div class="entry_hidden"> 
          <p>Hidden block</p> 
          <a href="#">Hidden link</a> 
        </div> 
      </article> 
    </li> 
    <li class="entry-list_i"> 
      <article class="entry"> 
        <h2 class="entry_title">Item #4</h2> 
        <p>Description</p> 
        <a href="#">Link</a> 
        <div class="entry_hidden"> 
          <p>Hidden block</p> 
          <a href="#">Hidden link</a> 
        </div> 
      </article> 
    </li> 
    <li class="entry-list_i"> 
      <article class="entry"> 
        <h2 class="entry_title">Item #5</h2> 
        <p>Description</p> 
        <a href="#">Link</a> 
        <div class="entry_hidden"> 
          <p>Hidden block</p> 
          <a href="#">Hidden link</a> 
        </div> 
      </article> 
    </li> 
    <li class="entry-list_i"> 
      <article class="entry"> 
        <h2 class="entry_title">Item #6</h2> 
        <p>Description</p> 
        <a href="#">Link</a> 
        <div class="entry_hidden"> 
          <p>Hidden block</p> 
          <a href="#">Hidden link</a> 
        </div> 
      </article> 
    </li> 
    <li class="entry-list_i"> 
      <article class="entry"> 
        <h2 class="entry_title">Item #7</h2> 
        <p>Description</p> 
        <a href="#">Link</a> 
        <div class="entry_hidden"> 
          <p>Hidden block</p> 
          <a href="#">Hidden link</a> 
        </div> 
      </article> 
    </li> 
  </ul>

Answer 2

Очевидно объединять каждый ряд блоков в отдельный блок-контейнер. В любом другом случае все блоки будут сами за себя. Или сделать всем блокам абсолютное позиционирование, тогда они не будут сдвигаться со своих мест. В любом случае, это задача не для css.