如何将父div包装到子div（对话框）的宽度？

Question

Jsfiddle来证明我的问题。

我有SPA（单页申请） 在应用程序中，可以在屏幕上弹出几个对话框 每个弹出窗口都有自己的宽度和高度。

对话框的标题和内容由angularJs添加 我在这里遇到的问题是对话框的大小。

目前所有弹出窗口都是单独制作和添加的。我想将其更改为一个包含可变内容的弹出窗口。这带来的问题是弹出窗口必须包裹内容宽度。

示例（如Jsfiddle所示）

<div class="dialog">
    <div class="titlebar"></div>
    <div class="content">
       The content that is added has css that tells it has a width of 400px
       This means the dialog needs to wrap to this 400px
    </div>
</div>

我如何仅使用CSS来解决这个问题？

---

弹出窗口变化的一些例子（虽然两者的宽度看起来相同，但情况并非如此）

Answer 1

使用display:table作为对话框。

这是您的Updated Fiddle.

Answer 2

使用display: inline-block; text-align: center;

适用于ie >= 8。

Fiddle

Answer 3

没有设定宽度的div将占用父级的宽度。

试试这个。

.content {
    background-color: #FFFFFF;
    min-width: 100%;
}

.content-width {
width: 100%;
background-color:#FFF000;
}

http://jsfiddle.net/VQA4k/6/

立即再次检查。您可以从这两个类中删除宽度，它将起作用。

这就是你想要的。

http://jsfiddle.net/VQA4k/16/

Answer 4

我不明白这个问题。 如果要将content-width div元素居中，只需添加margin: auto;即可。 如果您希望容器符合其内容的宽度，则必须将display属性从block更改为其他内容，例如inline-block或table（由@建议） jacelysh）。

你想要做的是什么？

Answer 5

对于年轻的浏览器，您可以使用：

---

1） display:flex;属性（包括居中） DEMO

.backdrop {
    position: fixed;
    top:0;
}
.backdrop {
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dialog {
    margin:auto;
    position:relative;
}

---

2） max-content作为width的值，而不是将任何宽度设置为内部     内容。 （执行一些填充以保留关闭按钮的空间）：     的 DEMO

关于W3C about those new keywords value的信息，我希望很快就能获得。

CSS更新

.dialog {
    width: max-content;
    z-index: 101;
    margin: auto;
    /* basic way t o center */
    top:50%;
    left:50%;
    margin:-80px -150px;

}

.titlebar {
    height: 50px;
    line-height: 50px;    
    background-color: #000000;
    border-radius: 10px 10px 0px 0px;
}

.title{
    color:#FFFFFF;
    font-size: x-large;
    padding:0 50px 0 10px;
}

.close_button {
    position: absolute;
    right: 0px;
    top: 0px;
    line-height:30px;
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    background-color: #ffd549;
    color: #000000;
}

.content {
    background-color: #FFFFFF;
}

.content-width {
    background-color:#FFF000;
}

或如前所述，使用display: table，inline-table