调整div块到整个父宽度

我试图在flexbox中缩放div以适合整个父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宽：在较小的屏幕RD，通过改变这个规则，使用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块到整个父宽度

回答

相关问题