Question

我正在尝试创建一个垂直标签控件（其中标签是容器右侧的垂直堆栈按钮，显示区域位于这些按钮的左侧。基本上是两列设置。

我似乎无法弄清楚如何在不采用绝对定位的情况下实现这一点（我想避免使用它，因为它似乎没必要）。因此，我当前的解决方案试图通过创建div inline-block并指定它们的宽度来实现它，以便它们适合父容器。

但是，正如您在下面看到的那样，菜单div不断下降到下一行。我哪里出错了，我该如何解决这个问题？

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="Stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <script src="script.js"></script>
    <style>
      .menu.container{
        background:#999;
        width:150px;
        position:relative;
        height:75px;
      }
      .menu.container div:first-child{
        width:calc(100% - 25px);
        height:100%;
        background:red;
        display:inline-block;
      }
      .menu.container div:nth-child(2){
        width:25px;
        height:75px;
        background:#fff;
        display:inline-block;
      }
      .menu.container div:nth-child(2) button{
        background:#333;
        border:none;
        color:#fff;
        width:25px;
        height:25px;
        
      }
      .menu.container div:nth-child(2) button:hover{
        background:#666;
        cursor:pointer;
      }
    </style>
  </head>

  <body>
    
    <div class="menu container">
      <div>Some UI here</div>
      <div>
        <button><i class="fa fa-trash"></i></button>
        <button><i class="fa fa-cog"></i></button>
        <button><i class="fa fa-info"></i></button>
      </div>
    </div>
    
  </body>

</html>

Answer 1

您可以使用flexbox完成此操作。只需给.menu.container课程display: flex;。

<强> CSS

.menu.container {
  display: flex;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="Stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <script src="script.js"></script>
    <style>
      .menu.container{
        background:#999;
        width:150px;
        position:relative;
        height:75px;
        display: flex;
      }
      .menu.container div:first-child{
        width:calc(100% - 25px);
        height:100%;
        background:red;
        display:inline-block;
      }
      .menu.container div:nth-child(2){
        width:25px;
        height:75px;
        background:#fff;
        display:inline-block;
      }
      .menu.container div:nth-child(2) button{
        background:#333;
        border:none;
        color:#fff;
        width:25px;
        height:25px;
        
      }
      .menu.container div:nth-child(2) button:hover{
        background:#666;
        cursor:pointer;
      }
    </style>
  </head>

  <body>
    
    <div class="menu container">
      <div>Some UI here</div>
      <div>
        <button><i class="fa fa-trash"></i></button>
        <button><i class="fa fa-cog"></i></button>
        <button><i class="fa fa-info"></i></button>
      </div>
    </div>
    
  </body>

</html>

Answer 2

作为flexbox技术的替代方案，您可以将float: left添加到红色容器块中。别忘了将clearfix添加到主容器中。

修改后的例子，第25行： http://jsbin.com/gulemovoci/1/edit?html,output

Answer 3

检查一下！

为两个容器子项添加了float: left。还添加了

 <div style="clear:both"></div>

用于清除浮动。请告诉我您对此的反馈。谢谢！

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="Stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <script src="script.js"></script>
    <style>
      .menu.container{
        background:#999;
        width:150px;
        position:relative;
        height:75px;
      }
      .menu.container div:first-child{
        width:calc(100% - 25px);
        height:100%;
        background:red;
        display:inline-block;
        float: left;
      }
      .menu.container div:nth-child(2){
        width:25px;
        height:75px;
        background:#fff;
        display:inline-block;
        float: left;
      }
      .menu.container div:nth-child(2) button{
        background:#333;
        border:none;
        color:#fff;
        width:25px;
        height:25px;
        
      }
      .menu.container div:nth-child(2) button:hover{
        background:#666;
        cursor:pointer;
      }
    </style>
  </head>

  <body>
    
    <div class="menu container">
      <div>Some UI here</div>
      <div>
        <button><i class="fa fa-trash"></i></button>
        <button><i class="fa fa-cog"></i></button>
        <button><i class="fa fa-info"></i></button>
      </div>
      <div style="clear:both"></div>
    </div>
    
  </body>

</html>

无法将div定位在两列垂直标签结构中

3 个答案: