東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【css】width: calcについて

レスポンシブで便利だったので。縮めても要素間のマージンが変わらない。


注意!!width:calcに設定した要素がdisplay:tableの場合は聞かないので注意!!!!!


①2カラムの場合。(containerのmax-width:952pxで間のmarginを常に40pxあける場合)

<div class="container">
  <div class="left">

  </div><!-- left -->
  <div class="right">
 
  </div><!-- right -->
 
</div><!-- container -->

.container {
    max-width: 952px;
    height: auto;
    margin: auto;
    font-size:0;
}


.container .left {
    width: -webkit-calc((100% - 40px) / 2);
    width: calc((100% - 40px) / 2);
    height: auto;
    position: relative;
    margin-bottom: 30px;
    display: inline-block;
    margin-right: 40px;
}

.container .right {
    width: -webkit-calc((100% - 40px) / 2);
    width: calc((100% - 40px) / 2);
    height: auto;
    position: relative;
    margin-bottom: 30px;
    display: inline-block;
}


①3カラムの場合。(3カラムでcontainerの横幅1200px、左端右端のmargin10px、カラムの間のmargin左右は20px)

calcの60pxは左右の1列marginの合計分を引いているんやね

.container {
    max-width: 1180px;
    font-size: 0;
    position: relative;
    margin-bottom: 50px;
}

.item {
    width: -webkit-calc((100% - 60px) / 3);
    width: calc((100% - 60px) / 3);
    margin: 10px;
    /* float: left; */
    display: inline-block;
    background: #fff;
    vertical-align: top;
    padding: 20px 0;
}