Question

尝试在页面上显示包含详细信息的20条消息。详细信息已修复。消息可以从零到大约240个字符不等。想要显示消息的第一部分，然后在悬停时显示其余部分。

我可以做得很好，但是当消息框展开时，它会将其他框推开。我已经研究了这批并在这里寻找答案，但是......

  <style>
        #bigboy {
            width:100%;
        }
        #boxout {
            width:200px;
            background-color: red;
            height:150px;
            margin:10px;
            float:left;
        }
        #boxout:hover {
            height:inherit;
            min-height:150px;
        }
        #boxin {
            width:180px;
            background-color: white;
            margin:10px;
            right:10px;
            font-size:1em;
            border:1px;
            overflow:hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            height: 130px;
            line-height: 1.8em;
        }
        #boxin:hover {
            word-wrap: initial;
            overflow: visible;
            height: inherit;
            min-height:130px;
            line-height: 1.8em;
            clear:both;
        }
    </style>
     <div id="bigboy">
        <div id="boxout">
            <div id="boxin">1</div>
        </div>
        <div id="boxout">
            <div id="boxin">22 22 22 22 22 22 22 22 22 2222 22222 22 22 22 22 22 22 2222 22222 22
                22 22 22 22 2222 22222 22 22 222 22 22 22 22 22 22 2222 22222 22 22 22
                22 22 2222 22222 22 22 22 22 22 2222 222"</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
        <div id="boxout">
            <div id="boxin">3</div>
        </div>
    </div>

第2个包含文本。我确信这很简单，但我正在努力使用CSS。感谢任何新手的帮助。全屏显示：http://jsfiddle.net/stevehomer/DyV79/，可编辑http://jsfiddle.net/stevehomer/DyV79/。

如果有人能告诉我如何漂浮这些信息并让他们的整体群体居中，那将是可爱的，但这并不重要。

TIA，您可以选择提供任何帮助。史蒂夫

Answer 1

让您走上正确道路的最简单方法是创建一个单独的示例，希望您能够将其应用到您自己的布局中。

Check the example here on jsFiddle

最重要的是要注意，为了阻止影响文档流中其他元素的元素，需要应用position: absolute。我已经包含了一些评论以及jsFiddle代码，这些代码应该填补其他空白。

编辑：

要将所有项目居中，您可以在整个群组中包含一个div（让我们称之为div id="wrapper"，将所有框设置为display: inline-block，然后应用text-align: center到#wrapper。Example of that here。或，如果您只想将整个群组居中（让这些框从左到右依旧显示），您就可以了需要提供#wrapper width，然后将其margin-left和margin-right设置为auto。Example of that here（添加边框以使其变得有点更清晰）。

即使使用z-index，扩展的div也会将其他div推迟

1 个答案: