0

我试图让这三个<div class="forward-link">对齐沿着相同的基线。我试过float:leftand 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;
}
4

3 回答 3

1

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

你想要做的是给你的所有LI元素一个相等的高度，足以容纳每个 LI 中的内容。

然后制作LI元素position:relative

然后制作forward-link元素position:absolute, left:0, bottom:0

这应该够了吧。

于 2012-07-31T04:36:58.740 回答
0

小提琴截图

小提琴

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;在示例中）会导致浏览器将其从“默认”位置移动以匹配该单个边缘属性。因此left，如果仅指定或，则right可以将其保留为自动计算。另请参阅W3C Wiki：CSS 绝对定位和固定定位。topbottom

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

于 2012-07-31T17:14:26.017 回答
0

给你所有的 3 个 div 不同的 id。1st 2 div 将浮动作为左侧，第三个 div 将浮动作为右侧。所有 3 个 div 都放在主 div 中，溢出隐藏。

于 2012-07-31T06:23:54.060 回答