0

私は3つ<div class="forward-link">をすべて同じベースラインに沿って整列させようとしています。試しましfloat:leftdisplay: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

3つのdivすべてに異なるIDを指定します。最初の2divはfloatを左に、3番目のdivはfloatを右に指定します。3つのdivはすべて、オーバーフローが非表示になっているメインdivに配置されます。

于 2012-07-31T06:23:54.060 に答える
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、、、、または)プロパティが1つしかない絶対位置の要素をサポートしていません)、要素が並んでいることが保証されている場合にのみ機能します。要素が絶対的に配置されているが、エッジプロパティが指定されていない場合、ブラウザは要素がない場合の場所に要素を配置しようとします。要素に1つのエッジプロパティ(例のように)のみを与えると、ブラウザはその単一のエッジプロパティに一致するように「デフォルト」の場所から要素を移動します。したがって、またはが指定されている場合は、自動的に計算されたままにすることができます。W3C Wiki:CSSの絶対位置と固定位置も参照してください。righttopbottomposition: absolute;bottom: 1em;leftrighttopbottom

タグを作成しますが、ULタグを作成します(絶対要素ではなく、のデフォルト値…絶対要素にはレイアウトがなく、親要素の高さが固定されている必要があります)。下部に必要なコンテンツ用のスペースを確保するために、下部に十分なパディングをタグに付けます。上記の例では、コンテンツは1行のテキストであり、ほとんどのフォントで約1.2emです。例では、間隔にもう少しパディングを追加して、約1.6emにしました。次にタグを作成すると、最も近い位置にある祖先、この場合はタグの下部に移動します。position: relative;LIposition: static;positionLIAposition: absolute; bottom: 0;UL

于 2012-07-31T17:14:26.017 に答える