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。第1个2 div给出浮动为左，第三个div为右浮动。所有3个div都放在主要div中，溢出隐藏。

Answer 3

Fiddle Screenshot

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;）会导致浏览器将其从“默认”位置移动以匹配该单边属性。因此，如果仅指定left或right，则top和bottom可以保留为自动计算。另见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代码。

尽管浮动，div仍然不会对齐：left和display：inline-block

3 个答案: