Question

如果老实说，我最尴尬的是要向别人寻求帮助，但我达到了我1小时的理智限制。

我希望在页面右侧有一个块（带有彩色边框），宽度适合文本内容+填充。我想让它为自己保留整行而没有其他元素在下面爬进左边的空间。

我很早就意识到任何宽度= 100％都意味着整行会有边框，而不仅仅是我想要的内容，浮动的各种实验导致左边的空间被占据的元素悄悄进入空间从下面。为了解决问题，我创建了一个100％宽度的包含块和display = block，并将边框放在子div上。仍然没有工作！我将#costblock作为容器，#costs作为内容：

#costsblock {
  display: block;
  width: 100%;  
}

#costs  {
  border: 1px solid #008eaf;
  padding: 10px 5px;
  width: auto;
  text-align: right;
}

<div id="costsblock">
<div id="costs">The text</div>
</div>

我已经尝试了几乎所有显示和宽度的组合以及父母和孩子的浮动并且没有任何效果 - 我要么让整个行被边框包围，要么我敢于放一个浮点数：就在任何地方然后，左边的空间被填满，从下面爬进来的元素。

我认为我需要将儿童宽度限制为仅保留文本所需的宽度，但我似乎无法正常工作！

Answer 1

您应该可以通过将display更改为inline-block为子项，然后将text-align设置为右侧的父元素来解决此问题：

#costsblock {    
  text-align:right;
}

#costs  {
  border: 1px solid #008eaf;
  padding: 10px 5px;
  display:inline-block;
}

没有必要为display:block元素设置div，因为它们默认定义为块级元素。

Answer 2

您使用额外容器元素的方法不起作用，因为#post是block元素，因此仍然占据整个宽度（除非您另有说明）。无论如何，不需要额外的元素。

我希望它为自己保留整行而没有其他元素爬进左边的空间。

然后你需要做的只是clear下一个元素的float：

＆＃13;

#costs {
  float:right;
  border: 1px solid #008eaf;
  padding: 10px 5px;
}

#next {
  clear:right;
}

＆＃13;

<div id="costs">The text</div>

<div id="next">I am the next element following the floating one.</div>

＆＃13;

Answer 3

你可以使用float，但一定要有一个在浮动元素下面有clear: both的元素，以防止任何元素“爬进剩下的空间”。

例如：

<div id="costsblock">
    <div id="costs">The text</div>
    <div style="clear: both"></div>
</div>

完整示例：http://jsfiddle.net/thijs_s/xxc9nk1t/

块内的css块向右浮动

3 个答案: