HTML / CSS中固定行内的浮动列答案

【问题标题】：Floating column within fixed row in HTML/CSSHTML / CSS中固定行内的浮动列
【发布时间】：2016-12-29 08:05:39
【问题描述】：

我的页面包含一个元素集合，每个元素都是一个固定高度的行。在行内，内容块应仅填充行的一部分。这可能是整行，只有左边的部分，只有右边的部分，或者在中间的某个地方。

为了用 html 绘制它，我正在考虑使用两个缓冲区 div（内容的左侧和右侧）。请注意缓冲区的宽度将以编程方式（使用角度）设置，因此不需要在 CSS 上设置。这可以通过内联样式在 PLNKR 中硬编码。

这是我的起点plnkr。

我问了一个类似的问题here，但只需要行的 3 种变化（左半边、右半边、全宽），现在我需要更大的灵活性。

<div class="employee-container">
   <div class="left-buffer"></div>
   <div class="content">
      <p>Show me full width</p>
   </div>
   <div class="right-buffer"></div>
</div>
<div class="employee-container">
   <div class="left-buffer"></div>
   <div class="content">
      <p>Show me floating left</p>
   </div>
   <div class="right-buffer"></div>
</div>
<div class="employee-container">
   <div class="left-buffer"></div>
   <div class="content">
      <p>Show me floating right</p>
   </div>
   <div class="right-buffer"></div>
</div>
<div class="employee-container">
   <div class="left-buffer"></div>
   <div class="content">
      <p>Show me in the middle</p>
   </div>
   <div class="right-buffer"></div>
</div>

输出将与下面类似，但除了可以选择向右或向左浮动元素外，它还可以在中间浮动。

【问题讨论】：

标签： html css twitter-bootstrap alignment css-float

【解决方案1】：

使用floats 将其放在右/左，使用margin:auto 将 div 居中：

.left{
  float: left;
  width: 33.33%;
}
.right{
  float: right;
  width: 33.33%;
}
.center{
  margin: auto;
  width: 33.33%;
}
.right-buffer {
  clear:both;  
}

（为说明添加了一些边框/填充）

/* Styles go here */

.employee-container {
  margin-bottom: 6px;
  margin-top: 6px;
  border: 1px solid lightsteelblue;
}
.employee-container > div.content {
  padding: 15px;
  background-color: lightsteelblue;
}
.left{
  float: left;
  width: 33.33%;
}
.right{
  float: right;
  width: 33.33%;
}
.center{
  margin: auto;
  width: 33.33%;
}
.right-buffer {
  clear:both;  
}

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="employee-container">
          <div class="left-buffer"></div>
          <div class="content">
            <p>Show me full width</p>
          </div>
          <div class="right-buffer"></div>
        </div>
        <div class="employee-container">
          <div class="left-buffer"></div>
          <div class="content left">
            <p>Show me floating left</p>
          </div>
          <div class="right-buffer"></div>
        </div>
        <div class="employee-container">
          <div class="left-buffer"></div>
          <div class="content right">
            <p>Show me floating right</p>
          </div>
          <div class="right-buffer"></div>
        </div>
        <div class="employee-container">
          <div class="left-buffer"></div>
          <div class="content center">
            <p>Show me in the middle</p>
          </div>
          <div class="right-buffer"></div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

【讨论】：

很棒的答案，这很好用！不知道为什么我的问题被否决了。谢谢！

【解决方案2】：

我希望我能很好地理解您的要求。我已经用 flexbox 在 Plunker 中做到了。

http://plnkr.co/edit/IxCupfRaXUWYlkVhsqga

 <style>
      .flex{display:flex;}
      .flex > *{flex:1;padding:2px}
 </style>

<body>
    <h1>Hello Plunker!</h1>
    <div class="container">
      <div class="row">
        <div class="col-md-4">
      <div class="employee-container">
        <div class="left-buffer"></div>
      <div class="content">
        <p>Show me full width</p>
      </div>
      <div class="right-buffer"></div>
    </div>
    <div class="flex">
    <div class="employee-container">
      <div class="left-buffer"></div>
      <div class="content">
        <p>Show me floating left with a very big text nd it will adjust automatically</p>   
      </div>
      <div class="right-buffer"></div>
    </div>
    <div class="employee-container">
      <div class="left-buffer"></div>
      <div class="content">
        <p>Show me floating right</p>
      </div>
      <div class="right-buffer"></div>
    </div>
    <div class="employee-container">
      <div class="left-buffer"></div>
      <div class="content">
        <p>Show me in the middle small text</p>
      </div>
      <div class="right-buffer"></div>
    </div>        
    </div>
        </div>
      </div>
    </div>

  </body>

【讨论】：

这是不对的，因为最后 3 行在同一行上合并在一起。我需要每一行都保留在它自己的空间上，但是行上显示的内容会有所不同。我在原始问题中添加了一张图片以尝试说明。

【解决方案3】：

这是我的代码和 plunker 链接可能对您有帮助 -

链接Plunker

HTML 代码

<body>
    <h1>Hello Plunker!</h1>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-12">
                        <div class="employee-container">
                            <div class="left-buffer"></div>
                            <div class="content">
                                <p>Show me full width</p>
                            </div>
                            <div class="right-buffer"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="employee-container leftDiv">
                            <div class="left-buffer"></div>
                            <div class="content">
                                <p>Show me floating left</p>
                            </div>
                            <div class="right-buffer"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="employee-container rightDiv">
                            <div class="left-buffer"></div>
                            <div class="content">
                                <p>Show me floating right</p>
                            </div>
                            <div class="right-buffer"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 centeredDiv">
                        <div class="employee-container">
                            <div class="left-buffer"></div>
                            <div class="content">
                                <p>Show me in the middle</p>
                            </div>
                            <div class="right-buffer"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS 代码

.employee-container {
      margin-bottom: 6px;
      margin-top: 6px;
    }
    .employee-container > div {
      padding: 3px;
      background-color: lightsteelblue;
    }
    .centeredDiv{
      position:relative;
    }

    .centeredDiv > .employee-container{
      position:absolute;
      width:50%;
      left:25%;
    }

    .rightDiv{
      width:50%;
      float:right;
    }

    .leftDiv{
      width:50%;
      float:left;
    }

【讨论】：