Question

我正在尝试使用一系列块来适应各自的内容，但每个人都会留在他们的行中：

+------------------------+
|        +--------------+|
|        | Some Content ||
|        +--------------+|
|  +--------------------+|
|  | Some Other Content ||
|  +--------------------+|
|               +-------+|
|               | Small ||
|               +-------+|
|               +-------+|
|               | Small ||
|               +-------+|
+------------------------+

我能找到的唯一想法可以在inline-block，float或position: absolute;上工作，所有这些想法都会将两个“小”块放在同一行......

关于如何实现这一目标的任何想法？

我的HTML非常基本。它看起来像这样（但可以接受建议）：

<div class="container">
    <div>Some Content</div>
    <div>Some Other Content</div>
    <div>Small</div>
    <div>Small</div>
</div>

Answer 1

.container div {
    float: right;
    clear: right;
}

http://jsfiddle.net/VzT6P/1/

Answer 2

使用float:right和clear:right：

.container div
{
    float:right;
    clear:right;
}

现场演示： http://jsfiddle.net/88uVs/1

Answer 3

.container div{
   float:right;
   clear:right;
}

Answer 4

实际上你有浮动选项，如果你清除它们就会很好内联块不会叠加在一起，你不能彼此清除它们，除非你浮动它们，所以显示显示:)。

但有时由于某种原因，你不会使用浮动所以你可能正在寻找相互叠加的块元素，并将它们的内联内容/框内容包装得很小。

表格或显示：表格具有此功能，它会回复您的问题：

为其内容设置一个块，但保留其阻止功能。

但如果你漂浮它们，重点是什么？

您可以使用方向让它们向右移动;然后重置内部方向。（就像使用text-align，font-size，float，line-height或任何其他规则一样。）

我正在谈论的CSS：http://codepen.io/gcyrillus/pen/eHIaJ

    /* direction + table */
.direction.rtl {direction:ltr;}
    .direction div {direction:ltr;
                    display:table;
                    padding:0.25em;
    }
    /* float + clear */
.float.right div { 
  float:right;
  clear:right;
}

你有你的解决方案，但我认为知道从（几乎）以来有其他方法可行是有用的。（几乎=显示：在IE8之前表不可用）干杯

Answer 5

您需要在所有“行”上使用clear：right。

例如：

<div class="container">
    <div class="medium right clear">block 1</div>
    <div class="large right clear">block 2</div>
    <div class="small right clear">block 3</div>
    <div class="small right clear">block 4</div>
</div>

需要CSS：

.right { float: right; }
.clear { clear: both; }
.medium, .large, .small { /*some markup for your blocks*/ }

DEMO： http://jsfiddle.net/tive/MFrBs/

Answer 6

将clear:right提供给所有div。这应该可以解决问题。

Answer 7

您正在寻找的是：

http://cssdeck.com/labs/5ypj4v4s

.container div {
  display: table;
  margin-left: auto; /* to align right */
}

适合其内容的块，但保持其块功能

7 个答案: