1

我试图让一系列块适合它们各自的内容，但每个块都留在他们的行中：

+------------------------+
|        +--------------+|
|        | 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>
4

7 回答 7

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

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

于 2013-06-07T15:10:46.860 回答
1

使用float:right和clear:right：

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

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

于 2013-06-07T15:09:47.103 回答
0

实际上，如果您清除它们，您可以选择浮动效果非常好。
内联块不会彼此堆叠，并且您无法将它们彼此清除，除非您浮动它们，因此显示显示:)。

但有时出于某种原因，您不会使用浮点数。
因此，您可能正在寻找将堆叠在一起的块元素，并将它们的 inline-content/box 内容包装得过小。

Table 或 display:table 正是这种能力，它回答了你的问题：

使块适合其内容，但保留其块能力。

但如果你让它们浮起来，那有什么意义呢？

您可以使用方向让它们向右而不是向左走；然后在里面重新设置方向。（就像你使用 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;
}

你有你的解决方案，但我认为知道自（几乎）以来还有其他方法有效。（几乎 = display:table 在 IE8 之前不可用）干杯

于 2013-06-07T16:12:06.727 回答
0 
.container div{
   float:right;
   clear:right;
}
于 2013-06-07T15:09:54.697 回答
-1

您将需要在所有“行”上使用 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*/ }

演示：http: //jsfiddle.net/tive/MFrBs/

于 2013-06-07T15:08:44.083 回答
-1

给clear:right所有的div。那应该可以解决问题。

于 2013-06-07T15:14:01.300 回答
-2

你要找的是这个：

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

.container div {
  display: table;
  margin-left: auto; /* to align right */
}
于 2013-06-07T15:46:32.810 回答