Изменить размер div на всю ширину родителя

Я пытаюсь масштабировать div в flexbox, чтобы он соответствовал всему родительскому div, я могу сделать это частично, но есть некоторые сложности, например, когда я масштабирую его, последний родитель берет его и перемещает один столбец влево, как я могу поместить его в фиксированное положение, чтобы масштабируемый div только масштабировал и не вызывал другие движения? Мне нужно, чтобы он был полностью адаптирован ко всей ширине и высоте. Вот мой код:Изменить размер div на всю ширину родителя

$(document).ready(function() { 
 
\t 
 
\t $('.div_service').click(function(event) { 
 

 
\t \t \t $(this).toggleClass('bigger'); 
 
\t }); 
 

 

 
});

@import url("https://fonts.googleapis.com/css?family=Open+Sans"); 
 
* { 
 
    padding: 0; 
 
    margin: 0; } 
 

 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    font-family: 'Open Sans', sans-serif; 
 
    background-color: #1C1C1C; } 
 

 
.div_services { 
 
    /* padding: 10%; */ 
 
    margin: 10% auto; 
 
    top: 15%; 
 
    position: relative; 
 
    width: 90%; } 
 
    .div_services_sub { 
 
    list-style-type: none; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    border-collapse: collapse; 
 
    text-align: center; 
 
    border-spacing: 0px; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    position: relative; } 
 
    .div_services_sub .bigger { 
 
     transition: all 0.5s ease; 
 
     position: absolute; 
 
     width: 100% !important; 
 
     height: 100% !important; 
 
     z-index: 99; 
 
     padding: 0 !important; 
 
     margin: 0 !important; } 
 
    .div_services_sub .div_service { 
 
     border: 2px solid #FEC70B; 
 
     padding: 60px 5px; 
 
     background-color: #000000; 
 
     color: #FEC70B; 
 
     width: 32%; 
 
     height: 100px; } 
 
     .div_services_sub .div_service a { 
 
     position: relative; 
 
     padding: 10px; 
 
     margin: 10px 0; 
 
     text-decoration: none; 
 
     color: #FEC70B; } 
 
     .div_services_sub .div_service a:hover { 
 
     color: white; } 
 

 
/*# sourceMappingURL=style.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div_services"> 
 
\t <div class="div_services_sub 1" > 
 
\t \t \t <div class="div1 div_service"> 
 
\t \t \t \t <h3>Title</h3> 
 
\t \t \t \t <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivt</h4> 
 
\t \t \t \t <a class="readmore" href="#" title="">Read more...</a> \t 
 
\t \t \t </div> 
 
\t \t \t <div class="div2 div_service"> 
 
\t \t \t \t <h3>Title</h3> 
 
\t \t \t \t <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtu</h4> 
 
\t \t \t \t <a class="readmore" href="#" title="">Read more...</a> 
 
\t \t \t </div> 
 
\t \t \t <div class="div3 div_service"> 
 
\t \t \t \t <h3>Title</h3> 
 
\t \t \t \t <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtit.</h4> 
 
\t \t \t \t <a class="readmore" href="#" title="">Read more...</a> \t 
 
\t \t \t </div> 
 
\t \t \t \t <div class="div4 div_service"> 
 
\t \t \t \t <h3>Title</h3> 
 
\t \t \t \t <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivti.</h4> 
 
\t \t \t \t <a class="readmore" href="#" title="">Read more...</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="div5 div_service"> 
 
\t \t \t \t <h3>Title</h3> 
 
\t \t \t \t <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivt/h4> 
 
\t \t \t \t <a class="readmore" href="#" title="">Read more...</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="div6 div_service"> 
 
\t \t \t \t <h3>Title</h3> 
 
\t \t \t \t <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtis?</h4> 
 
\t \t \t \t <a class="readmore" href="#" title="">Read more...</a> \t 
 
\t \t \t \t </div> 
 

 
\t </div> 
 
</div>

источник

2017-02-19 Adrian A

прогибается: 1, на ребенка. – pol

В padding не включают в набор width, ваши детали будут шире, чем 3: й на небольших экранах, путем изменения этого правила и использовать box-sizing, он будет включен и оставить место для 3-х элементов

.div_services_sub .div_service { 
    border: 2px solid #FEC70B; 
    padding: 60px 5px; 
    background-color: #000000; 
    color: #FEC70B; 
    width: 32%; 
    /* height: 100px;     removed */ 
    box-sizing: border-box;  /*  added */ 
}

Обновлено

Я также изменил свой transition использовать transform: translate. Таким образом, анимация выглядит намного лучше

$(document).ready(function() { 
 

 
    $('.div_service').click(function(event) { 
 

 
    $(this).toggleClass('bigger'); 
 
    }); 
 

 

 
});

@import url("https://fonts.googleapis.com/css?family=Open+Sans"); 
 
* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    font-family: 'Open Sans', sans-serif; 
 
    background-color: #1C1C1C; 
 
} 
 

 
.div_services { 
 
    /* padding: 10%; */ 
 
    margin: 10% auto; 
 
    top: 15%; 
 
    position: relative; 
 
    width: 90%; 
 
} 
 

 
.div_services_sub { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    border-collapse: collapse; 
 
    text-align: center; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.div_services_sub .div_service { 
 
    transition: transform 0.5s ease; 
 
} 
 
.div_services_sub .div1 { 
 
    transform-origin: top left; 
 
} 
 
.div_services_sub .div2 { 
 
    transform-origin: top center; 
 
} 
 
.div_services_sub .div3 { 
 
    transform-origin: top right; 
 
} 
 
.div_services_sub .div4 { 
 
    transform-origin: bottom left; 
 
} 
 
.div_services_sub .div5 { 
 
    transform-origin: bottom center; 
 
} 
 
.div_services_sub .div6 { 
 
    transform-origin: bottom right; 
 
} 
 

 
.div_services_sub .bigger { 
 
    z-index: 99; 
 
    transform: scale(3,2); 
 
} 
 

 
.div_services_sub .div_service { 
 
    border: 2px solid #FEC70B; 
 
    padding: 60px 5px; 
 
    background-color: #000000; 
 
    color: #FEC70B; 
 
    width: 32%; 
 
    box-sizing: border-box; 
 
} 
 

 
.div_services_sub .div_service a { 
 
    position: relative; 
 
    padding: 10px; 
 
    margin: 10px 0; 
 
    text-decoration: none; 
 
    color: #FEC70B; 
 
} 
 

 
.div_services_sub .div_service a:hover { 
 
    color: white; 
 
} 
 

 

 
/*# sourceMappingURL=style.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="div_services"> 
 
    <div class="div_services_sub 1"> 
 
    <div class="div1 div_service"> 
 
     <h3>Title1</h3> 
 
     <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivt</h4> 
 
     <a class="readmore" href="#" title="">Read more...</a> 
 
    </div> 
 
    <div class="div2 div_service"> 
 
     <h3>Title2</h3> 
 
     <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtu</h4> 
 
     <a class="readmore" href="#" title="">Read more...</a> 
 
    </div> 
 
    <div class="div3 div_service"> 
 
     <h3>Title3</h3> 
 
     <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtit.</h4> 
 
     <a class="readmore" href="#" title="">Read more...</a> 
 
    </div> 
 
    <div class="div4 div_service"> 
 
     <h3>Title4</h3> 
 
     <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivti.</h4> 
 
     <a class="readmore" href="#" title="">Read more...</a> 
 
    </div> 
 
    <div class="div5 div_service"> 
 
     <h3>Title5</h3> 
 
     <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivt</h4> 
 
     <a class="readmore" href="#" title="">Read more...</a> 
 
    </div> 
 
    <div class="div6 div_service"> 
 
     <h3>Title6</h3> 
 
     <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtis?</h4> 
 
     <a class="readmore" href="#" title="">Read more...</a> 
 
    </div> 
 

 
    </div> 
 
</div>

источник

2017-02-19 14:14:33 LGSon

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

@AdrianA Обновлен мой ответ, используя 'transform: scale' – LGSon

Спасибо, это работает! Я добавил некоторый css, чтобы сохранить размер дочерних ячеек и не привязан к встроенному '.bigger * {transform: scale (.333, .5);}' –

Please change the css.. 

<style> 
@import url("https://fonts.googleapis.com/css?family=Open+Sans"); 
* { 
    padding: 0; 
    margin: 0; } 

body { 
    width: 100%; 
    height: 100%; 
    font-family: 'Open Sans', sans-serif; 
    background-color: #1C1C1C; } 

.div_services { 
    /* padding: 10%; */ 
    margin: 10% auto; 
    top: 15%; 
    position: relative; 
    width: 70%; } 
    .div_services_sub { 
    list-style-type: none; 
    display: flex; 
    flex-flow: row wrap; 
    border-collapse: collapse; 
    text-align: center; 
    border-spacing: 0px; 
    border-collapse: collapse; 
    width: 100%; 
    position: relative; } 
    .div_services_sub .bigger { 
     transition: all 0.5s ease; 
     position: absolute; 
     width: 100% !important; 
     height: 100% !important; 
     z-index: 99; 
     padding: 0 !important; 
     margin: 0 !important; } 
    .div_services_sub .div_service { 
     border: 2px solid #FEC70B; 
     padding: 60px 5px; 
     background-color: #000000; 
     color: #FEC70B; 
     width: 48%; 
     height: 100px; } 
     .div_services_sub .div_service a { 
     position: relative; 
     padding: 10px; 
     margin: 10px 0; 
     text-decoration: none; 
     color: #FEC70B; } 
     .div_services_sub .div_service a:hover { 
     color: white; } 

/*# sourceMappingURL=style.css.map */ 
</style>

источник

2017-02-19 13:27:20 Piyali

Изменить размер div на всю ширину родителя

ответ

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