如何集中内联块？

时间：2017-11-24 20:22:27

标签： css

如何将绿色框（.b）紧紧围绕其内容，以便我可以水平居中？

＆＃13;
＆＃13; 
.c {
  background-color: blue;
  margin: 5px;
  height: 100px;
  display: inline-block;
}

.a {
  border: 1px solid red;
}

.b {
  margin: 0 auto;
  border: 1px solid green;
}

body {
  padding: 50px;
}
＆＃13; 
<div class="a">
  <div class="b">
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

澄清：

enter image description here

2 个答案:

答案 0 :(得分：1)

这是一个解决方案，它不会使.b变小以适应所有.c但它会使.c被拉伸成一个小点，以避免有空格。

<强>更新

我添加了一些媒体查询，以确保所有元素始终保持相同的宽度。当然，这是基于确切的值，因此对于通用解决方案，我们可能需要包含import { EventAggregator } from 'aurelia-event-aggregator'; import { inject } from 'aurelia-framework'; import { View } from "aurelia-framework"; @inject(EventAggregator) export class NavBarSpinner { ea; constructor(msg) { this.ea = new EventAggregator(); } publishNavLocation(navToCity) { this.ea.publish('nav::toggleLogin', {nav: navToCity}); console.log("Method call publishLocationZug()"); } } 或某些变量。

calc
* {
  box-sizing: border-box;
}

.c {
  background-color: blue;
  margin: 5px;
  height: 100px;
  min-width: 80px;
  flex: 1;
  display: inline-block;
}

.a {
  border: 1px solid red;
  display: flex;
}

.b {
  margin: 0 auto;
  border: 1px solid green;
  display: flex;
  flex-wrap: wrap;
}

.b:after {
  content: "";
  flex: 1;
}

@media all and (max-width:1110px) {
  .b:after {
    margin: 5px;
  }
}

@media all and (min-width:1020px) and (max-width:1110px) {
  .b:after {
    flex: 10;
  }
}

@media all and (min-width:930px) and (max-width:1020px) {
  .b:after {
    flex: 7.75;
  }
}

@media all and (min-width:840px) and (max-width:930px) {
  .b:after {
    flex: 5.5;
  }
}

@media all and (min-width:750px) and (max-width:840px) {
  .b:after {
    flex: 3.25;
  }
}

@media all and (min-width:570px) and (max-width:660px) {
  .b:after {
    flex: 4.33;
  }
}

body {
  padding: 50px;
}

答案 1 :(得分：1)

正如我在评论中提到的，我不确定是否可以单独使用CSS，我创建了一个快速的JS / jQuery解决方案来根据第一行内容计算宽度。

function resizeGrid() {
  var rowPos = 0;
  var col = 0;
  $('.b').removeAttr('style');
  $('.c').each(function() {
    var thisRowPos = $(this).offset().top;
    if (thisRowPos != rowPos) {
      if (rowPos != 0) {
        /* Break out of the $.each() loop */
        return false;
      } else {
        col++;
      }
      rowPos = thisRowPos;
    } else {
      col++;
    }
  });
  $('.b').css('width', $('.c').outerWidth(true) * col + 'px');
  console.log('Number of columns: ' + col);
}

$(window).on('resize', resizeGrid);
resizeGrid();
* {
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.a {
  border: 1px solid red;
}

.b {
  margin: 0 auto;
  background: lightgreen;
}

.b:after {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  clear: both;
}

.c {
  padding: 5px;
  height: 100px;
  display: inline-block;
  float: left;
}

.c table {
  background-color: blue;
  height: 100%;
  width: 100%;
  float: left;
}

.c table td {
  vertical-align: top;
}

body {
  padding: 50px;
}
<div class="a">
  <div class="b">
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <td>x x x x x</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

相关问题
最新问题