特别收缩 [英] Special div shrinking

查看：105
本文介绍了特别收缩的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述


$ b

  • 如果屏幕宽度> 1100px 然后 left nav 宽度不断 555px 时，<-c $ c>空-space 缩小到0当屏幕宽度 = 1100px


  • if 屏幕宽度< 1100px 然后 left nav 宽度缩小，空-space div仍然是0px。


    右边部分（ div class = button 和 div class = right ）保持不变 

      .wrapper {display：flex;保证金：0汽车; max-width：1310px; font-size：0.6rem;}。wrapper .left {flex-basis：555px; background-color：lightblue;}。left__nav {display：inline-block;填充：5px;颜色：深蓝色; text-decoration：none;}。empty-space {flex-basis：100px; flex-shrink：1;}。wrapper .right {background-color：orange; flex-basis：462px;显示：flex; justify-content：flex-end; / * align right（at end）* /}。wrapper .button {flex-basis：193px; background-color：＃3ab8a4; text-align：center;} / *这个demo的风格* /。wrapper> div {box-sizing：border-box; background-color：lightgray; border-collapse：collapse;}。mark-center {text-align：center; font-size：30px; color：red;}。container-small {text-align：center; background-color：lightgray;最大宽度：1100px;保证金：汽车;填充：1rem 0; }

    < div class =wrapper> < div class =empty-space>空白空间< / div> < div class =left> < a class =left__navhref =＃> Link3< / a>左导航< / div> < div class =right>链接右对齐< / div> < div class =button>按钮< / div>< / div>< div class =mark-center> & uarr;< / div>< div class =container-small>有些内容< / code>

    最简单的方法是添加2个包装，一个用于左侧侧，另一个用于右侧这一点，你可以很容易 center 在左/右链接包装器见面。



    删除<$ c $在标记/ CSS中使用c>< div class =empty-space>空白空间< / div> 元素，而是创建空白空间留在左边边，只需将 margin-left：auto 添加到 left_inner <

    pre



    $ p $ <$> snippetdata-lang =jsdata-hide =truedata-console =truedata-babel =false> 

      .wrapper {display：flex;保证金：0汽车; max-width：1310px; font-size：0.6rem;}。wrapper .left，.wrapper .right {flex-basis：50％; display：flex;}。wrapper .left_inner {margin-left：auto; flex-basis：555px; background-color：lightblue;}。wrapper .right_inner {flex-basis：462px;背景颜色：橙色;显示：flex; justify-content：flex-end; / *对齐内容的权利（在最后）* /}。wrapper .button_inner {flex-basis：193px; background-color：＃3ab8a4;显示：flex; justify-content：center; align-items：center;}。left__nav {display：inline-block;填充：5px;颜色：深蓝色; text-decoration：none;}。right__nav {display：inline-block;填充：5px;颜色：黑色; text-decoration：none;} / *这个demo的样式* /。wrapper> div {box-sizing：border-box; background-color：lightgray; border-collapse：collapse;}。mark-center {text-align：center; font-size：30px; color：red;}。container-small {text-align：center; background-color：lightgray;最大宽度：1100px;保证金：汽车; padding：1rem 0;}

    < div class =包装> < div class =left> < div class =left_inner> < a class =left__navhref =＃>左侧连结< / a> < / DIV> < / DIV> < div class =right> < div class =right_inner> < a class =right__navhref =＃>连结权利< / a> < / DIV> < div class =button_inner>按钮< / div> < / div>< / div>< div class =mark-center> & uarr;< / div>< div class =container-small>有些内容< / code>


$ b 为了能满足上面的要求，并且在较窄的屏幕上将它们垂直居中放置，你需要一个媒体查询或脚本。



以下是使用媒体查询小于1000像素（ max-width：999px

堆栈片段 

  .wrapper {display：flex;保证金：0汽车; max-width：1310px; font-size：0.6rem;}。wrapper .left，.wrapper .right {flex-basis：50％; display：flex;}。wrapper .left_inner {margin-left：auto; flex-basis：555px; background-color：lightblue;}。wrapper .right_inner {flex-basis：462px;背景颜色：橙色;显示：flex; justify-content：flex-end; / *对齐内容的权利（在结束）* /}。wrapper .button_inner {flex-basis：193px; background-color：＃3ab8a4;显示：flex; justify-content：center; align-items：center;}。left__nav {display：inline-block;填充：5px;颜色：深蓝色; text-decoration：none;}。right__nav {display：inline-block;填充：5px;颜色：黑色; text-decoration：none;} @ media（max-width：999px）{.wrapper，.wrapper .left，.wrapper .right {flex-basis：auto; flex-direction：column; align-items：center; } .wrapper .left_inner {flex-basis：auto; margin-left：0; } .wrapper .right_inner，.wrapper .button_inner {flex-basis：auto; }} / *样式* /。wrapper> div {box-sizing：border-box; background-color：lightgray; border-collapse：collapse;}。mark-center {text-align：center; font-size：30px; color：red;}。container-small {text-align：center; background-color：lightgray;最大宽度：1100px;保证金：汽车; padding：1rem 0;}

< div class =包装> < div class =left> < div class =left_inner> < a class =left__navhref =＃>左侧连结< / a> < / DIV> < / DIV> < div class =right> < div class =right_inner> < a class =right__navhref =＃>连结权利< / a> < / DIV> < div class =button_inner>按钮< / div> < / div>< / div>< div class =mark-center> & uarr;< / div>< div class =container-small>有些内容< / code>


$ b 如果你想链接和按钮包装宽度，给他们一个宽度，并使他们的内容中心对齐。



堆栈片段



.wrapper {display：flex;保证金：0汽车; max-width：1310px; font-size：0.6rem;}。wrapper .left，.wrapper .right {flex-basis：50％; display：flex;}。wrapper .left_inner {margin-left：auto; flex-basis：555px; background-color：lightblue;}。wrapper .right_inner {flex-basis：462px;背景颜色：橙色;显示：flex; justify-content：flex-end; / *对齐内容的权利（在最后）* /}。wrapper .button_inner {flex-basis：193px; background-color：＃3ab8a4;显示：flex; justify-content：center; align-items：center;}。left__nav {display：inline-block;填充：5px;颜色：深蓝色; text-decoration：none;}。right__nav {display：inline-block;填充：5px;颜色：黑色; text-decoration：none;} @ media（max-width：999px）{.wrapper，.wrapper .left，.wrapper .right {flex-basis：auto; flex-direction：column; justify-content：center; align-items：center;宽度：100％; } .wrapper .left_inner {flex-basis：auto; margin-left：0; text-align：center;宽度：100％; } .wrapper .right_inner，.wrapper .button_inner {flex-basis：auto; text-align：center; justify-content：center;宽度：100％; }} / *样式* /。wrapper> div {box-sizing：border-box; background-color：lightgray; border-collapse：collapse;}。mark-center {text-align：center; font-size：30px; color：red;}。container-small {text-align：center; background-color：lightgray;最大宽度：1100px;保证金：汽车; padding：1rem 0;}

< div class =包装> < div class =left> < div class =left_inner> < a class =left__navhref =＃>左侧连结< / a> < / DIV> < / DIV> < div class =right> < div class =right_inner> < a class =right__navhref =＃>连结权利< / a> < / DIV> < div class =button_inner>按钮< / div> < / div>< / div>< div class =mark-center> & uarr;< / div>< div class =container-small>一些内容< / div>


How should I change CSS such way, that

  • if width of screen > 1100px then left nav width is constantly 555px, but empty -space is shrinking to 0 when width of screen = 1100px

  • if width of screen < 1100px then left nav width is shrinking and empty -space div still is 0px.

Right part (div class=button and div class=right) remains unchanged

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size:0.6rem;
}
.wrapper .left {
  flex-basis: 555px;
  background-color: lightblue;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}

.empty-space {
  flex-basis: 100px;
  flex-shrink:1;
}
.wrapper .right {
  background-color: orange;

  flex-basis: 462px;
  display: flex;
  justify-content: flex-end; /*  align right (at end)  */
}
.wrapper .button {
  flex-basis: 193px;
  background-color: #3ab8a4;
  text-align:center;

}

/* style for this demo */
.wrapper > div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {  
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding:1rem 0;
  
}

<div class="wrapper">
  <div class="empty-space">empty space
  </div>
  <div class="left">
    <a class="left__nav" href="#">Link3</a>
    Left Nav
  </div>
  <div class="right">
    Links right aligned
  </div>
  <div class="button">
    Button
  </div>
</div>
<div class="mark-center">
  &uarr;
</div>
<div class="container-small">
  Some content
</div>

解决方案

The simplest way to accomplish that is to add 2 wrappers, one for the left side and one for the right side, and with that you will be able to easily center where the left/right links wrapper meet.

Remove the <div class="empty-space">empty space</div> element in the markup/CSS and instead, to create the empty space at the left in the left side, simply add margin-left: auto to the left_inner and it will be pushed to the right.

Stack snippet

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size: 0.6rem;
}

.wrapper .left,
.wrapper .right {
  flex-basis: 50%;
  display: flex;
}

.wrapper .left_inner {
  margin-left: auto;
  flex-basis: 555px;
  background-color: lightblue;
}
.wrapper .right_inner {
  flex-basis: 462px;
  background-color: orange;
  display: flex;
  justify-content: flex-end;      /*  align content right (at end)  */
}
.wrapper .button_inner {
  flex-basis: 193px;
  background-color: #3ab8a4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}
.right__nav {
  display: inline-block;
  padding: 5px;
  color: darkred;
  text-decoration: none;
}

/* style for this demo */
.wrapper>div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding: 1rem 0;
}

<div class="wrapper">
  <div class="left">
    <div class="left_inner">
      <a class="left__nav" href="#">Link left</a>
    </div>
  </div>
  <div class="right">
    <div class="right_inner">
      <a class="right__nav" href="#">Link right</a>
    </div>
    <div class="button_inner">
      Button
    </div>
  </div>
</div>
<div class="mark-center">
  &uarr;
</div>
<div class="container-small">
  Some content
</div>

Updated

To be able to fullfil both above requirement and to stack them vertical, centered, on narrower screens, you need a media query or a script.

Here is an updated version using a media query for less than 1000px (max-width: 999px)

Stack snippet

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size: 0.6rem;
}

.wrapper .left,
.wrapper .right {
  flex-basis: 50%;
  display: flex;
}

.wrapper .left_inner {
  margin-left: auto;
  flex-basis: 555px;
  background-color: lightblue;
}
.wrapper .right_inner {
  flex-basis: 462px;
  background-color: orange;
  display: flex;
  justify-content: flex-end;      /*  align content right (at end)  */
}
.wrapper .button_inner {
  flex-basis: 193px;
  background-color: #3ab8a4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}
.right__nav {
  display: inline-block;
  padding: 5px;
  color: darkred;
  text-decoration: none;
}

@media (max-width: 999px) {
  .wrapper,
  .wrapper .left,
  .wrapper .right {
    flex-basis: auto;
    flex-direction: column;
    align-items: center;
  }
  .wrapper .left_inner {
    flex-basis: auto;
    margin-left: 0;
  }
  .wrapper .right_inner,
  .wrapper .button_inner {
    flex-basis: auto;
  }
}

/* style for this demo */
.wrapper>div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding: 1rem 0;
}

<div class="wrapper">
  <div class="left">
    <div class="left_inner">
      <a class="left__nav" href="#">Link left</a>
    </div>
  </div>
  <div class="right">
    <div class="right_inner">
      <a class="right__nav" href="#">Link right</a>
    </div>
    <div class="button_inner">
      Button
    </div>
  </div>
</div>
<div class="mark-center">
  &uarr;
</div>
<div class="container-small">
  Some content
</div>

If you want the link and button wrapper to fill the width, give them a width and make their content center aligned.

Stack snippet

.wrapper {
  display: flex;
  margin: 0 auto;
  max-width: 1310px;
  font-size: 0.6rem;
}

.wrapper .left,
.wrapper .right {
  flex-basis: 50%;
  display: flex;
}

.wrapper .left_inner {
  margin-left: auto;
  flex-basis: 555px;
  background-color: lightblue;
}
.wrapper .right_inner {
  flex-basis: 462px;
  background-color: orange;
  display: flex;
  justify-content: flex-end;      /*  align content right (at end)  */
}
.wrapper .button_inner {
  flex-basis: 193px;
  background-color: #3ab8a4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left__nav {
  display: inline-block;
  padding: 5px;
  color: darkblue;
  text-decoration: none;
}
.right__nav {
  display: inline-block;
  padding: 5px;
  color: darkred;
  text-decoration: none;
}

@media (max-width: 999px) {
  .wrapper,
  .wrapper .left,
  .wrapper .right {
    flex-basis: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .wrapper .left_inner {
    flex-basis: auto;
    margin-left: 0;
    text-align: center;
    width: 100%;
  }
  .wrapper .right_inner,
  .wrapper .button_inner {
    flex-basis: auto;
    text-align: center;
    justify-content: center;
    width: 100%;
  }
}

/* style for this demo */
.wrapper>div {
  box-sizing: border-box;
  background-color: lightgray;
  border-collapse: collapse;
}
.mark-center {
  text-align: center;
  font-size: 30px;
  color: red;
}
.container-small {
  text-align: center;
  background-color: lightgray;
  max-width: 1100px;
  margin: auto;
  padding: 1rem 0;
}

<div class="wrapper">
  <div class="left">
    <div class="left_inner">
      <a class="left__nav" href="#">Link left</a>
    </div>
  </div>
  <div class="right">
    <div class="right_inner">
      <a class="right__nav" href="#">Link right</a>
    </div>
    <div class="button_inner">
      Button
    </div>
  </div>
</div>
<div class="mark-center">
  &uarr;
</div>
<div class="container-small">
  Some content
</div>

这篇关于特别收缩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆