Question

NAV下的内容区域有一个DIV（class =＆＃34; threeSpread），其中包含三个DIV（ID =＆＃34; top＆＃34;，＆＃34; middle＆＃34;和＆＃34 ;底部＆＃34;）风格相同。每个图像的大小相同，但H2和P文本的数量不同。

问题在于DIV的高度不会保持不变。它们似乎有不同的调整，因为每个盒子里面的文本数量不同。有时调整浏览器屏幕时，三个DIV渲染的高度相同，但不一致。

我认为解决方法是将DIV的高度属性设置为100％，但这没有任何影响......

Here is an image of the page

以及下面的HTML和CSS。

<!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    </head>
    <body>

        <div id="menu">

            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li class="selected"><a href="support.html">Support</a></li>
                <li><a href="faqs.html">FAQs</a></li>
                <li><a href="events.html">Events</a></li>
            </ul>
        </div>



        <div class="threeSpread">
        <div id="top">
        <img src="imagesForNew/new1.jpg">
        <h2>CHININESE INVESTORS COME TO DETROIT</h2>
        <p>"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"</p>
         <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
        </div>

        <div id="middle">
        <img src="imagesForNew/new2.gif">
        <h2>Donald Trump sees Detroit as a good investment</h2>
        <p>"What Dan Gilbert did is fantastic. When he sees something like that, it's a good sign"

    Trump said he also sees Detroit as a potential investment opportunity.

    "A lot of times when I go to a place."</p>
         <a href="http://www.crainsdetroit.com/article/20130501/BLOG003/130509990/donald-trump-sees-detroit-as-a-good-investment">crainsdetroit.com</a>
        </div>

        <div id="bottom">
        <img src="imagesForNew/new3.gif">
        <h2>Warren Buffett calls Detroit land of 'Huge Potential'</h2>
        <p>Chairman and found of Rock Ventures and Quicken Loans Dan Gilbert, not pictured, interviews Berkshire Hathaway Chairman Warren Buffett, during an event at Detroit Homecoming</p>
         <a href="http://www.mlive.com/business/detroit/index.ssf/2014/09/billionaire_banter_dan_gilbert.html">Mlive.com</a>
        </div>

        </div>








    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

    </body>
    </html>


/****************************
*****************************
NEWS Side fluid layout
*****************************
****************************/
div.threeSpread {
    width: 99%;


clear: both;

border: solid black 1px;


}

div#top, div#middle, div#bottom  {
    max-width: 20%;
    border: solid green 1px;
    display: inline-block;
    margin: 0 5%;
    height: 100%;
}



@media (max-width: 900px) {

    div#top, div#middle, div#bottom  {

    display: block;
    border: solid red 1px;
    max-width: 100%;
    margin: 10px 0;
    clear: both;
    overflow: hidden;


}

/** Adjusts the text inside the three boxes
 to move more to the center in the vertical stack view **/
div#top h2, div#middle h2, div#bottom h2 {
    margin: 10% 0 auto;
        height: 100%;
}

div#top img, div#bottom img {
    float: right;
}

div#middle img {
    float: left;
    margin-right: 10px; 
}

Answer 1

你应该使用flexbox。例如

div.threeSpread {
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

你在这里有完整的例子http://codepen.io/luarmr/pen/LNWWaR和前缀，我也删除了我不需要的代码。

Answer 2

您可以尝试这种方法：

.threeSpread {
    display: table;
    border-collapse: separate;
    border-spacing: 30px 0;
}

#top, #middle, #bottom {
    display: table-cell;
    height: 100%;
}

@media (max-width: 900px) {
   .threeSpread {
     border-spacing: 0;
    }
}

这是一个有效的例子 - JSFiddle

您可以使用display: flex执行此操作，但旧版浏览器不支持此功能。

Answer 3

vertical-align: top;

这会将所有div对齐到顶部而不是底部。将它设置在div顶部，中间和底部。 min-height

min-height: 40em

如果你想保持所有高度相同，你也可以设置最小高度，使其成为你将拥有/允许的最大高度。

Example DEMO

仅使用css

3 个答案: