尽管float:left和display:inline-block，div也不会对齐

Question

我正在尝试让这三个<div class="forward-link">都沿着相同的基线对齐。我尝试过float:left和display:inline-block，但似乎都不起作用。有什么想法吗？该站点是使用php/Wordpress创建的，但下面是呈现的HTML和CSS。

还有，http://jsfiddle.net/mugUG/

呈现的HTML：

<div id="landing-content">
    <div id="landing-brief">
        <ul>
            <li>
                <h2><a href="http://growingedgecoaching.com/blog">Growing Edge Blog</a></h2>
                    <p>“Embrace the messy imperfect genius. Seek to be misunderstood by creative minds.” ~Ross Martin One thing I have learned over the years as an entrepreneur is that when I am in my most creative space, I have to release being a perfectionist and jump into my creative messiness. I need to create space that allows [...]</p>
                <div class="forward-link">
                    <p><a href="http://growingedgecoaching.com/home"><span style="color:#b8bf33">Continue Reading</span></a></p>
                </div><!-- end forward-link -->
            </li>
            <li>
                <h2><a href="index.php?page_id=27">Meet Mary Anne</a></h2>
                <p>Mary Anne is the founder of Growing Edge Coaching™, a coaching and consulting company, where she helps individuals and companies develop powerful strategies to move forward in their life, their work, or their business. Her coaching is founded on her 20 years of experience as a manager and senior leader in non-profits.</p>
                <div class="forward-link">
                    <p><a href="index.php?page_id=27"><span style="color:#b8bf33">More About Mary Anne</span></a></p>
                </div><!-- end forward-link -->
            </li>
            <li>
                <h2><a href="#">Recent Tweets</a></h2>
                <div id="twitter-feed">

                        <ul>
                                                    <li>
                        RT @LollyDaskal: regret is often the result of too many excuses. #leadfromwithin #leadership                            </li>
                                                    <li>
                        What you do in small doses becomes big doses in your life.                          </li>
                                                    <li>
                        RT @ThisIsSethsBlog: Seth's Blog: Two kinds of unique http://t.co/1TJ1Vuf9                          </li>
                                                    </ul>
                    </div><!-- end twitter-feed -->
                <div class="forward-link">
                    <p><a href="https://twitter.com/growing_edge"><span style="color:#b8bf33">Follow @Growing_Edge</span></a></p>
                </div><!-- end forward-link -->
            </li>
        </ul>
    </div><!-- end brief -->
    <div id="landing-social">
        <h1>Growing Edge Coaching™ works with individuals and companies to attain positive actions and powerful results in their work and life.</h1>
        <div id="icons">
            <ul>
                <li><a href="http://www.facebook.com/maryanneflanagan"><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/facebook.png" alt="Growing Edge Coaching Facebook" id="fb" /></a></li>
                <li><a href="https://twitter.com/growing_edge"><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/twitter.png" alt="Growing Edge Coaching Twitter" id="tw" /></a></li>
                <li><a href="http://www.linkedin.com/in/maryanneflanagan"><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/linkedin.png" alt="Growing Edge Coaching Linked In" id="li" /></a></li>
            </ul>
        </div><!-- end icons -->
    </div><!-- end social -->
    <div id="landing-contact-info">
        <p><span>PHONE</span> 917.238-9726 | <span>E-MAIL</span> <a href="mailto:maflanagan@growingedgecoaching.com?Subject=contact via website"><span style="color:#333333">maflanagan@growingedgecoaching.com</span></a></p>
    </div><!-- end contact-info -->
</div><!-- end landing-content -->

CSS

/* Landing Content */

#landing-content {
    background: #f7f7f7;
    clear: both;
    margin-top: 40px;
}

#landing-brief {
    width: 860px;
    margin: 0 auto;
    padding-top: 40px;
}

#landing-brief ul li {
    display: inline-block;
    height: 200px;
    width: 250px;
    position: relative;
    vertical-align: top;
}

#landing-brief ul li:last-child {
    padding-right: none;
}

#landing-brief #twitter-feed {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 75%;
    line-height: 1.5;
    color: #333333;
    margin-left: -28px;
}

#landing-brief #twitter-feed ul li {
    padding-bottom: 5px;
}

#landing-brief .forward-link {
    position: absolute;
    padding-left: 0; 
    padding-bottom: 0;
    padding-top: 10px;
}

Answer 1

所以你的LI元素是水平对齐的，对吧？

您要做的是为所有LI元素赋予足够高的相同高度，以便容纳每个LI中的内容。

然后将LI元素设为position:relative

然后将forward-link元素设为position:absolute, left:0, bottom:0

这应该能起到作用。

Answer 2

给你所有的3个div不同的id。第一个2个div将浮动设置为左，第三个div设置为右浮动。所有3个div都放在带有溢出隐藏的主div中。

Answer 3

​

​

Fiddle

ul {
  position: relative;
}
li {
  position: static; /* The default if no position property is applied */
  padding-bottom: 1.6em;
}
a {
  position: absolute;
  bottom: 0; /* Or, in the linked Fiddle, 1em to accommodate the padding
                on the bottom of the UL tag. */
}

这只适用于IE7+ (IE6不支持只有一条边的绝对定位元素(left、right、top或bottom)属性)，而且只有在保证元素是并排的情况下才有效。当元素被绝对定位但没有指定边缘属性时，浏览器会尝试将元素放在没有position: absolute;的地方。仅为元素提供一个边缘属性(如示例中的bottom: 1em; )会导致浏览器将其从“默认”位置移动到与该单一边缘属性匹配的位置。因此，如果仅指定了top或bottom，则可以将left和right保留为自动计算。另请参见W3C Wiki: CSS absolute and fixed positioning。

将UL标记设为position: relative;，但将LI标记设为position: static; ( position的默认值，而不是绝对…绝对元素没有布局，并且需要父元素上的固定高度)。在底部给LI标记足够的填充，以便在底部为您想要的内容腾出空间。在上面的例子中，内容是一行文本，对于大多数字体来说大约是1.2em。我在示例中添加了更多的间距，并将其设置为大约1.6em。然后将A标记设为position: absolute; bottom: 0;，它们将移动到最近定位的祖先的底部，或者在本例中是UL标记。