css - 如何在 HTML5 中自动调整制表符宽度

Question

我想根据 <div> 自动调整容器大小.如果有 4 <div>在容器内然后它看起来不错但如果只有 1 <div>那么右侧会有足够的空间。所以想根据 <div> 调整容器大小.我怎样才能做到这一点？请帮助我。

主页面是这样的

当有 4 个面板时，它非常适合这样

当有 2 个面板时，右侧有足够的空间，用颜色标记。我想在这里自动调整容器宽度。

 <div class="container">
<div class="row">
    <div>
        <ul class="nav nav-tabs" id="ATab">
            <li class="active"><a data-toggle="tab" href="#Select">Select</a></li>
            <li><a data-toggle="tab" href="#Criteria">Criteria</a></li>
        </ul>
        <div class="tab-content">
            <div id="Select" class=" tab-pane fade in active"></div>
            <div id="Criteria" class="tab-pane fade"></div>

                  <div class="container active col-md-3 col-sm-6 ">
                    <div class="panel panel-default">
                        <div class="panel-heading">First Name</div>
                    </div>
                </div>

                <div class="container active col-md-3 col-sm-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">Last Name</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

Answer 1

您可以为此行为使用 flexbox。检查这个codepen演示。

HTML:

<div class="parent">
  <ul class="nav">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>

CSS:

.parent {
  background-color: orange;
}

.parent ul.nav {
  list-style: none;
  padding: 0px;
  margin: auto;
  display: flex;
}

.parent ul.nav li {
  background-color: grey;
  padding: 10px 15px;
  border-right: 1px solid black;
  width: 100%;
  text-align: center;
}

.parent ul.nav li:last-child {
  border: 0px;
}

希望对您有所帮助!

编辑 1:

检查其他 codepen演示。

body {
  padding: 0px;
  margin: 0;
}

.parent {
  background-color: orange;
  padding: 20px;
}

.parent .tabFrame .itemContainer {
  display: inline-block;
  margin-bottom: 50px;
  padding: 5px;
  border: 1px solid;
  overflow: hidden;
}

.parent .tabFrame .myItem {
  background-color: grey;
  display: inline-block;
  width: 100px; /* can be any fixed width */
  padding: 10px;
  color: white;
  border: 1px solid black;
}

<div class="parent">
  <div class="tabFrame">
    <div>Tab area</div>
    <div class="itemContainer">
      <div class="myItem">Item 1</div>
      <div class="myItem">Item 2</div>
      <div class="myItem">Item 3</div>
      <div class="myItem">Item 4</div>
    </div>    
  </div>
  
  <div class="tabFrame">
    <div>Tab area</div>
    <div class="itemContainer">
      <div class="myItem">Item 1</div>
      <div class="myItem">Item 2</div>
      <div class="myItem">Item 3</div>
    </div>
  </div>
  
  <div class="tabFrame">
    <div>Tab area</div>
    <div class="itemContainer">
      <div class="myItem">Item 1</div>
      <div class="myItem">Item 2</div>
    </div>
  </div>
  
  <div class="tabFrame">
    <div>Tab area</div>
    <div class="itemContainer">
      <div class="myItem">Item 1</div>
    </div>
  </div>
</div>

编辑:2
看这个 codepen

.myTab {
  border: 1px solid #dddddd;
  display: inline-block;
  margin-top: -1px;
}

.myTab .tab-pane .myPanel {
  display: inline-block;
  margin: 10px;
}

.myPanel {
  min-width: 200px;
}

#ATab {
  border-bottom: 0px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div>
      <ul class="nav nav-tabs" id="ATab">
        <li class="active">
          <a data-toggle="tab" href="#Select">Select</a>
        </li>
        <li>
          <a data-toggle="tab" href="#Criteria">Criteria</a>
        </li>
      </ul>
      <div class="tab-content clearfix myTab">
        <br>
        <div id="Select" class=" tab-pane fade in active clearfix">
          <div class="panel panel-default myPanel">
            <div class="panel-heading">First Name</div>
          </div>

          <div class="panel panel-default myPanel">
            <div class="panel-heading">Last Name</div>
          </div>
        </div>
        <div id="Criteria" class="tab-pane fade">
          <div class="panel panel-default myPanel">
            <div class="panel-heading">First Name</div>
          </div>

          <div class="panel panel-default myPanel">
            <div class="panel-heading">Last Name</div>
          </div>
          
          <div class="panel panel-default myPanel">
            <div class="panel-heading">First Name</div>
          </div>

          <div class="panel panel-default myPanel">
            <div class="panel-heading">Last Name</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>