jquery - 如何修复该区域的高度？

Question

我在使用此 fancy JQuery plugin 开发的基于 Web 的应用程序中放置了一些引号和短消息.一切正常，但现在的问题是修复显示报价或消息的区域。我想要这个区域的高度是固定的，而不是可扩展的。

怎么做？

HTML:

<div id="wrapper">
            <div id="article">

                <blockquote>
                    <p>Accidents hurt – safety doesn’t.</p>
                    <cite>&ndash; Unknown Author</cite>
                </blockquote>
                    </div>
</div>

CSS:

#wrapper { width: 300px; margin: 1px auto; }    
blockquote p { margin-bottom: 10px; font-style: italic; }
blockquote cite { font-style: normal; display: block; text-align: right; text-transform: uppercase; font-size: 10px; font-weight: bold; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif; }

/*
 |  Setting the width for the blockquotes is required
 |  to accurately adjust it's contianer
*/

blockquote {
    font-family: Georgia, Times, serif;
    width: 250px; /* required */
    margin: 0 auto;
    }

/*
 |  The #quote_wrap div is created
 |  by Quovolver to wrap the quotes
*/

#quote_wrap { 
    background: #fbffec 20px 20px;
    margin: 13px 0 0 0; 
    padding: 20px; 
    border: 1px solid #edffaf; 
    }

JavaScript:

<script type="text/javascript" src="js/jquery.quovolver.js"></script>

        <!-- JavaScript Test Zone -->
        <script type="text/javascript">
            $(document).ready(function () {

                $('blockquote').quovolver();

            });
        </script>

编辑:我想修复，因为如果我有很长的消息或引用，它将被扩展，这将导致扩展网站页面，如下所示:

如果消息很短，下面的区域会是这样的？:

新更新:

以下 css 属性解决了这个问题:

height:100px!important;

但现在它扰乱了框内报价的组织。例如，如果消息很短，它将位于框的顶部。如果它很长，它将居中，这就是我想要的所有消息，无论是长消息还是短消息。 那么怎么做呢？

Answer 1

.widget_content {
height: 150px !important; /* Or however high you want the div to be */
}

这将阻止 div 改变高度，我想这就是你的意思。

“150px”可以更改为您希望 div 的高度。

.widget_content {
overflow: hidden;
}

这将切断任何比您之前指定的高度更长的引号。 (如果您确保所有引号都足够小以适合您之前指定的高度 div，则您不需要这个，以防万一。)