Question

我有一个包含固定宽度内容（另一个div内的图像）和可变宽度内容（动态变化的文本）的div。我需要这个外部div：

从新行开始
与其内容完全一样宽
最好以新行结尾

因为它应该是该行的唯一元素，所以我无法使用display:inline或display:inline-block。另一方面，display:block不会自动缩小。这是我的代码：

我对overflow，float和clear的实验没有产生任何结果。任何帮助，建议，链接等都是非常受欢迎的。谢谢。

Answer 1

我就是这样做的：我给了#outer CSS样式display:inline-block，然后将其放在另一个div中，使用css display:block来确保#outer留在另一条线上：

<强> CSS

#outer {
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    height: 50px;
    width:auto;
    display:inline-block;
}

#image {
    float: right;
    width: 50px;
}

#element_block {
    display:block;
}

<强> HTML

Some content above div

<div id="element_block">
    <div id="outer">
        Text inside div<div id="image">IMG</div>
    </div>
</div>

Some content below div

DEMO

Answer 2

我不确定我是否适合你，但我认为这有帮助：

放置

display: table-cell;
vertical-align: middle;

你可以将中间变成顶部，底部等。

demo

Answer 3

只需在“text-element”和“block-element”之间添加<br/>即可。然后显示：内联阻止你的内部容器

#outer {
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    height: 50px;
    width:auto;
    display:inline-block;
}

#image {
    float: right;
    width: 50px;
}

jsfiddled here

Answer 4

使用弹性盒：

.holder{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.item{
  border:1px solid red;
  margin:10px;
  padding:10px;
}

<div class="holder">
  <div class="item">
    Item has a lot of text
  </div>
  <div class="item">
    Small
  </div>
  <div class="item">
    Very big and wide with lots of content
  </div>
</div>

如何创建适合内容宽度的块div？

4 个答案: