Как установить уменьшенную ширину на div

Question

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

Вот код

.container1 { 
position: relative; 
height: 600px; 
width: 29%; 
top: 0px; 
left: 0%; 
float: left; 
z-index: 99; 
opacity: 1; 
background-repeat: no-repeat; 
background-size: cover; 
background-position: center; 
border-right: #000 4px solid; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
} 

.container1:hover { 
width: 40%; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
} 

.container1 .reduced-width { 
width: 20%; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; } 
#image1 { 
background: url("../img/bg1.jpg"); 
} 

.container2 { 
position: relative; 
height: 600px; 
width: 29%; 
top: 0px; 
left: 0%; 
float: left; 
z-index: 99; 
opacity: 1; 
background-repeat: no-repeat; 
background-size: cover; 
background-position: center; 
border-right: #000 4px solid; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
} 

.container2:hover { 
    width: 40%; 
    transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
    } 
.container2 .reduced-width { 
width: 20%; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; } 
#image2 { 
background: url("../img/bg2.jpg"); 
} 

.container3 { 
position: relative; 
height: 600px; 
width: 29%; 
top: 0px; 
left: 0%; 
float: left; 
z-index: 99; 
border-right: #000 4px solid; 
background-repeat: no-repeat; 
background-size: cover; 
background-position: center; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
} 

.container3:hover { 
width: 40%; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
} 
.container3 .reduced-width { 
width: 20%; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
} 
#image3 { 
background: url("../img/bg3.jpg"); 
} 
.container4 { 
position: relative; 
height: 600px; 
width: 13%; 
top: 0px; 
left:0%; 
z-index: 999; 
float: right; 
opacity: 1; 
background-repeat: no-repeat; 
background-size: cover; 
background-position: center; 
border-right: #000 4px solid; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
} 

.container4:hover { 
width: 30%; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
} 
#image4 { 
background: url("../img/3.jpg"); 
} 

И HTML

<div class="container1 animated bounceInLeft reduced-width" id="image1">   
    </div> 
    <div class="container2 animated bounceInDown reduced-width" id="image2"> 
    </div> 
    <div class="container3 animated bounceInDown reduced-width" id="image3"> 
    </div> 
    <div class="container4 animated bounceInRight reduced-width" id="image4"> 
    </div> 

Answer 1

Вы не нужно делайте все, что нужно, чтобы делать то, что вы хотите. Вы можете сделать это без Javascript или jQuery, используя только CSS3.

1. Оберните свой div с в контейнере.
2. Применить display: flex к контейнеру.
3. Применить flex: 1 1 к детям. Это важно .. не давайте никакой гибкой основы. Пусть она по умолчанию.
4. Дайте детям width: 100%;, они будут автоматически расти/сокращаться до доступного места.
5. Применить flex: 1 1 <your-width> для :hover о детях. Вот и все.

Demo Fiddle: http://jsfiddle.net/abhitalks/xghqmq6u/

Смотрите этот фрагмент:

.wrap { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: columns; 
 
} 
 

 
.floaters { 
 
    flex: 1 1 0%; 
 
    height: 120px; width: 100%; 
 
    transition: all 500ms; 
 
} 
 

 
.floaters:hover { flex: 1 1 50%; } 
 

 
.container1 { background-color: #f00;} 
 
.container2 { background-color: #0f0;} 
 
.container3 { background-color: #00f;} 
 
.container4 { background-color: #ccc;}

<div class="wrap"> 
 
    <div class="container1 floaters" id="image1"></div> 
 
    <div class="container2 floaters" id="image2"></div> 
 
    <div class="container3 floaters" id="image3"></div> 
 
    <div class="container4 floaters" id="image4"></div> 
 
</div>

Answer 2

EDIT: теперь четвёртая колонка имеет меньшую ширину

Вот пример того, как можно это исправить: http://jsfiddle.net/intergalactic_overlords/0hLmrme4/

Html нуждается в обертке. При наведении обертки ширина детей (контейнеров) устанавливается равной 20%. При зависании конкретного контейнера его ширина устанавливается равной 40%.

<div class="container-wrap"> 
    <div class="container container1 animated bounceInLeft reduced-width" id="image1">   
    </div> 
    <div class="container container2 animated bounceInDown reduced-width" id="image2"> 
    </div> 
    <div class="container container3 animated bounceInDown reduced-width" id="image3"> 
    </div> 
    <div class="container container4 animated bounceInRight reduced-width" id="image4"> 
    </div> 
</div> 

CSS:

.container { 
    background:snow; 
    box-sizing:border-box; 
    position: relative; 
    height: 600px; 
    width: 23%; 
    float: left; 
    z-index: 99; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    border-right: #000 4px solid; 
    transition: all 300ms ease-in-out; 
    -o-transition: all 300ms ease-in-out; 
    -moz-transition: all 300ms ease-in-out; 
    -webkit-transition: all 300ms ease-in-out; 
} 
.container-4 { 
    width: 21%; 
} 

.container-wrap:hover > div { 
    width: 21%; 
} 
.container-wrap:hover > .container4 { 
    width: 16%; 
} 
.container-wrap > .container:hover { 
    background: yellow; 
    width: 42%; 
    transition: all 300ms ease-in-out; 
    -o-transition: all 300ms ease-in-out; 
    -moz-transition: all 300ms ease-in-out; 
    -webkit-transition: all 300ms ease-in-out; 
} 
.container-wrap > .container4:hover { 
    background: yellow; 
    width: 37%; 
    transition: all 300ms ease-in-out; 
    -o-transition: all 300ms ease-in-out; 
    -moz-transition: all 300ms ease-in-out; 
    -webkit-transition: all 300ms ease-in-out; 
} 

Answer 3

Это, как вы можете это исправить.

HTML (вам не нужна обертка)

<div class="container1 animated bounceInLeft" id="image1"></div> 
<div class="container2 animated bounceInDown" id="image2"></div> 
<div class="container3 animated bounceInDown" id="image3"></div> 
<div class="container4 animated bounceInRight" id="image4"></div> 

CSS

.container { 
position: relative; 
height: 600px; 
width: 24%; 
top: 0px; 
left: 0%; 
float: left; 
z-index: 99; 
opacity: 1; 
background-repeat: no-repeat; 
background-size: cover; 
background-position: center; 
border-right: #000 4px solid; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
    background-color:red; 
} 

.container:hover { 
width: 35%; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
} 

.container.reduced-width { 
width: 20%; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; } 
#image1 { 
background: red; 
} 

#image2 { 
background: yellow; 
} 

#image3 { 
background: green; 
} 

#image4 { 
background: blue ; 
} 

И, конечно, нужен Javascript (Jquery здесь)

$('.animated').mouseenter(function(){ 
    console.log('here'); 
    $(this).removeClass('reduced-width').siblings('.animated').addClass('reduced-width'); 
}).mouseout(function(){ 
    $('.animated').removeClass('reduced-width'); 
}); 

Answer 4

• когда вы ориентируетесь на 2 classes вы должны делать это без пробелов (как вы делали .container1 .reduced-width должно быть .container1.reduced-width)

• установить width таким образом, что ваш дизайн не сломается .. как ваша ширина всех контейнеров должны быть 24% (как у вас есть 4px границу тоже), так что общая сумма будет равна или меньше 100%.

• Вы должны написать меньше css и указать больше элементов. например, вы ориентируетесь на конкретный div каждый раз, когда это нецелесообразно .. вы можете использовать сокращенный класс только один раз, и он каждый раз задавал бы размер.

• это может быть ваш уменьшенный/оптимизированный код:

HTML:

<div class="container animated bounceInLeft" id="image1"></div> 
<div class="container animated bounceInDown" id="image2"></div> 
<div class="container animated bounceInDown" id="image3"></div> 
<div class="container animated bounceInRight" id="image4"></div> 

CSS:

.container { 
position: relative; 
height: 600px; 
width: 24%; 
top: 0px; 
left: 0%; 
float: left; 
z-index: 99; 
opacity: 1; 
background-repeat: no-repeat; 
background-size: cover; 
background-position: center; 
border-right: #000 4px solid; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
    background-color:red; 
} 

.container:hover { 
width: 40%; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
} 

.container.reduced-width { 
width: 20%; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; } 
#image1 { 
background: red; 
} 

#image2 { 
background: yellow; 
} 

#image3 { 
background: green; 
} 

#image4 { 
background: blue ; 
} 

Вот CodePen Link