将div块调整为整个父宽度

时间：2017-02-19 13:15:03

标签： jquery css resize position flexbox

我正在尝试在flexbox中缩放div以适合整个父div，我可以部分地做到这一点，但是有一些复杂的问题，比如当我缩放它时，最后一个父级取代它并向左移动一列，怎么能然后我把它放在一个固定的位置，这样可扩展的div只能缩放而不会触发其他人移动？ 我需要它适应所有宽度和高度。这是我的代码：

$(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 {
    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">
	<div class="div_services_sub 1" >
			<div class="div1 div_service">
				<h3>Title</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>Title</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>Title</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>Title</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>Title</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>Title</h3>
				<h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtis?</h4>
				<a  class="readmore" href="#" title="">Read more...</a>	
				</div>

	</div>
</div>

2 个答案:

答案 0 :(得分：0)

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>

答案 1 :(得分：0)

由于struct LIST { char *word; struct LIST *next; }; typedef struct Node { char letter; struct LIST *words; struct Node *left; struct Node *right; } Node; 未包含在集padding中，您的项目将比较小屏幕上的3：rd宽，通过更改此规则并使用width，它将是包括并留出3个项目的空间

box-sizing

<强> 更新

我还将您的.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。这样动画看起来好多了

＆＃13;
＆＃13; 
transform: translate
＆＃13; 
$(document).ready(function() {

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

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


});
＆＃13; 
@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 */
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题