【问题标题】:Floating asides to each side of a section?将侧边浮动到部分的每一侧?
【发布时间】:2014-03-09 00:00:35
【问题描述】:

我有两个旁边的标签。一个side标签需要向右浮动,另一个需要向左浮动。它们都在正确的边上,但该部分不会让边靠近它,它们仍在它下面。

这里是html: http://pastebin.com/BHtdYZfD

这是CSS: http://pastebin.com/jhfLNNfS

也许,我在代码中遗漏了一些东西。任何帮助将不胜感激!

【问题讨论】:

  • 你肯定遗漏了一些问题......一个jsFiddle,它比pastebin更有帮助。

标签: html css css-float floating


【解决方案1】:

给你:只需像这样更改 HTML 代码:

        <header>
                <img src="town_hall_logo.gif" alt="Town Hall logo" height="80">
                <hgroup>
                        <h1>San Joaquin Valley Town Hall</h1>
                        <h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
                </hgroup>
        </header>

        <aside class="aside2">
                <h1>Event change for November 16</h1>
                <p>SJV Town Hall is pleased to announce the addition of award-winning author Andrew Ross Sorkin.
                The appearance of previously scheduled speaker, Greg Mortenson, has been postponed.</p>
        </aside>
        <aside>
                <h1 id="speakers">2011-2012 Speakers</h1>
                <h2>October 19, 2011<br><a href="nopage.html">Jeffrey Toobin</a></h2>
                <img src="toobin75.jpg" alt="Jeffrey Toobin photo">
                <h2>November 16, 2011<br><a href="nopage.html">Andrew Ross Sorkin</a></h2>
                <img src="sorkin75.jpg" alt="Andrew Ross Sorkin photo">
                <h2>January 18, 2012<br><a href="nopage.html">Amy Chua</a></h2>
                <img src="chua75.jpg" alt="Amy Chua photo">
                <h2>February 15, 2012<br><a href="nopage.html">Scott Sampson</a></h2>
                <img src="sampson75.jpg" alt="Scott Sampson">
        </aside>
        <section>
                <h1>Our Mission</h1>
                <p>San Joaquin Valley Town Hall is a non-profit organization that is run by an all-volunteer board of directors. Our mission is to bring nationally and internationally renowned, thought-provoking speakers who inform, educate, and entertain our audience! As one or our members told us:</p>
                <blockquote>“Each year I give a ticket package to each of our family members. I think of it as the gift of knowledge...and that is priceless.”</blockquote>
                <h1>Speaker of the Month</h1>
                <article>
                        <h1>Fossil Threads in the Web of Life</h1>
                        <img src="sampson_dinosaur.jpg" alt="Scott Sampson with Dinosaur">
                        <h2>February 15, 2012<br>Scott Sampson</h2>
                        <p>What's 75 million years old and brand spanking new? A teenage Utahceratops! Come to the Saroyan, armed with your best dinosaur roar, when Scott Sampson, Research Curator at the Utah Museum of Natural History, steps to the podium. Sampson's research has focused on the ecology and evolution of late Cretaceous dinosaurs and he has conducted fieldwork in a number of countries in Africa.</p>
                        <p><a href="nopage.html">Read more.</a>&nbsp;<b>Or meet us there!</b></p>
                </article>
                <h1>Our Ticket Packages</h1>
                <ul>
                        <li>Season Package: $95</li>
                        <li>Patron Package: $200</li>
                        <li>Single Speaker: $25</li>
                </ul>
        </section><footer>
                <p>© 2012, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
        </footer>







</body>

然后删除部分中的那些 CSS 规则:

clear: left;
clear: both;

【讨论】:

    猜你喜欢
    • 2016-08-11
    • 2013-06-30
    • 1970-01-01
    • 1970-01-01
    • 2013-02-19
    • 2016-12-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多