Question

我是Css的新手。我不知道这个问题是否有答案。其实我有一个页面

<body>
    <div id="confirm">
        <img src="images/help.png" alt="Help Icon">
        <div id="message">
            Are you sure you want to  deletesadcasdsaduasudashdhasdoiasnidosanidoasyduiasnduasnoidnasidonasiodashydioasndoiasndioasdhioasydoiasndioashydasiodsaoidasd

        </div>

        <button>Ok</button>               
    </div>

</body>

我正在设定他的风格。这是我的css

#confirm {

    background-color: #ddd;
    display:block;
    width:400px;
    min-height:120px;
    position:absolute;
    border:1px solid #ccc;
    border-radius: 15px;
    -moz-border-radius: 15px;              /*FireFox*/
    -webkit-border-radius: 15px;           /*Opera, safari*/
    behavior: url(css/border-radius.htc);  /*IE*/
}

#confirm img {
    border:1px solid #ccc;
    margin:20px 20px 0 20px;
    float:left;
    width:64px;
}

#message {
    width: 280px;
    border:1px solid #ccc;
    float: left;
    white-space: normal;
    margin:20px 0 0 0;
    overflow: hidden;
}

#confirm button {
    position: relative;
    width:68px;
    margin:20px 180px 0 0;
    float:right;
}

现在，当我运行我的代码时，它会产生这样的输出

enter image description here

现在我想要的是，不管“消息div”的文本有多大。 “confirm div”会自动调整它们的大小，并定位其中的所有元素。就像现在我设置“确认div”“min-height = 120”。如您所见，文字正在裁剪。不应裁剪文本，消息div的大小应根据文本大小自动增加。随着消息div大小增加，确认div也增加高度，确认div调整其中的图像和按钮。最后所有元素都应在确认Div内。或者您可以说消息和图像应始终保留在div的中心。我该怎么办？

由于

Answer 1

你的消息文本没有空格并且里面有一个长的单词，你需要将所有单词都打破以自动调整div的大小

添加

word-wrap: break-word;

到#messsage的CSS

JSFiddle

<强>更新

好的，事实证明这很难，但这对你有用JSFiddle2，我添加了另一个div并将图像放在那个中，它的位置绝对不浮动，所以可以使图像居中。还必须添加另一个浮动的div，因为图像是为了强制消息在正确的位置。

Answer 2

自动换行：break-word;将达到目的。

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

DEMO

<强>更新 LIKE THIS middled from top?

div如何自动调整其大小并将元素放置在其中

2 个答案: