調整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塊到整個父寬度

回答

相關問題