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

Question

我的页面包含一个元素集合，每个元素都是一个固定高度的行。在行内，内容块应仅填充行的一部分。这可以是整行、仅左侧部分、右侧部分或中间某处。

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

这是我的开始 plnkr。

我问了一个类似的问题，但只需要 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>

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

Answer 1

希望我理解你的要求。我在 Plunker 中使用 flexbox 实现了它。

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>

Answer 2

使用 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>

Answer 3

这是我的代码和 plunker link 可能对你有帮助 -

Link 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;
    }

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

Floating column within fixed row in HTML/CSS

html

css

alignment

css-float

twitter-bootstrap