Question

我正在努力使用CSS。在这个example中，有没有人可以帮助我理解为什么“旁边”没有漂浮在图片放置的正下方？为什么页面中这么低？

感谢您的建议。

HTML

<body>

<nav id="top-menu">
    <ul>
        <li> <a href="index.html">Home</a> </li>
        <li> <a href="charting.html">Charting</a> </li>
        <li> <a href="map.html">Map</a> </li>
        <li> <a href="financials.html">Financials</a> </li>
        <li> <a href="forum.html">Forum</a> </li>
        <li> <a href="about.html">About</a> </li>
    </ul>
</nav>

<div id="maindiv">
<header>
    <img class="img-right" src="images/Inkscape_stocktails_240_240.png"
        alt="Stocktail" width="240" height="240" />
    <hgroup>
        <h1> Welcome to Stocktails </h1>
    </hgroup>
    <p> The perfect blend for your investment portfolio </p>
</header>

<article class="story">
    <h1> Start investing today with Stocktails </h1>
    <p>
        Stocktails is a collection of tools and resources to facilitate the investing process, from data retrieval, stock analysis and valuation, up to the construction and monitoring of your portfolio.
    </p>
</article>

<article class="story">
    <h1> The renaissance of value investing </h1>
    <p>
        As the world economy slowly emerges and recovers from the <a href="http://en.wikipedia.org/wiki/Great_Recession">Great Recession</a>,
        appetite for stocks is still on the wane. Stung by three successive market crashes in recent memory (<a href="http://en.wikipedia.org/wiki/Black_Monday_(1987)">1987</a>, <a href="http://en.wikipedia.org/wiki/Dot-com_bubble">2000</a>, <a href="http://en.wikipedia.org/wiki/Financial_crisis_of_2007–08">2008</a>),
        retail investors turned their attention away from common shares and towards presumably safer assets, such as property.
        In parallel, institutional investors, from insurance companies to endowments, have greatly diversified their holdings towards private equity, hedge funds and hard assets.
    </p>
    <p>
        <em>Stocks are down, but not out</em>. It is our belief that they may even be on the verge of a renaissance. As most alternative asset classes,
        notably sovereign bonds and property, exhibit signs of a bubble, the pendulum is may be about to swing in the reverse direction.
        <strong>Now is the time for the savvy investor to put stocks back at the core of his portfolio</strong>.
    </p>
    <blockquote>"I will tell you how to become rich. Close the doors. Be fearful when others are greedy. Be greedy when others are fearful." (<cite>Warren Buffet</cite>)</blockquote>
    <p>
        In addition to a reduced appetite for stocks, <a href="http://en.wikipedia.org/wiki/Modern_portfolio_theory">modern portfolio theory</a> - that notably relies on the <a href="http://en.wikipedia.org/wiki/Efficient_market_hypothesis">efficient markets hypothesis</a> - led many investors to give up on stock picking
        and to invest into passive funds instead (cf. <cite>A random walk down Wall-Street</cite>, by B. Malkiel). As investors buy under-valued shares and spurn or short-sell the richly-valued, prices will tend to align with risk,
        making it more difficult to find value in the market. Eventually, the average participant stops scouting for value and resigns himself to purchasing the index.
        But not all companies are created equal and opportunities are bound to reappear. It is precisely when the market capitulates that the discerning investor should step back in to pick value stocks.
    </p>
    <p>
        Value investing also suffered from the action of central banks. The unprecedented level of liquidity introduced by quantitative easing in the US, the UK, the EU and Japan was key to prevent an outright depression.
        It has also been a boon for most investors. The resulting suppression of interest rates lifted all boats, with little regard for the quality of the asset.
        As the tide reverses, the overall performance of the market is bound to disappoint. But we also expect a large variation of performance between strong and weak companies. The stars will then be aligned for the value investor to find gems among the wreck.
    </p>
</article>

<article class="story">
    <h1> Top 10 investing tips from <cite>Warren Buffet</cite>, the Oracle of Omaha </h1>
    <ul>
        <li>"It's far better to buy a wonderful company at a fair price than a fair company at a wonderful price."</li>
        <li>"Rule No. 1: never lose money; rule No. 2: don't forget rule No. 1"</li>
        <li>"Our approach is very much profiting from lack of change rather than from change. With Wrigley chewing gum, it's the lack of change that appeals to me. I don't think it is going to be hurt by the Internet. That's the kind of business I like."</li>
        <li>"I try to buy stock in businesses that are so wonderful that an idiot can run them. Because sooner or later, one will."</li>
        <li>"The stock market is a no-called-strike game. You don't have to swing at everything – you can wait for your pitch. The problem when you're a money manager is that your fans keep yelling, "Swing, you bum!""</li>
        <li>"Price is what you pay; value is what you get. Whether we're talking about socks or stocks, I like buying quality merchandise when it is marked down."</li>
        <li>"Never count on making a good sale. Have the purchase price be so attractive that even a mediocre sale gives good results."</li>
        <li>"If you understood a business perfectly and the future of the business, you would need very little in the way of a margin of safety."</li>
        <li>"We've long felt that the only value of stock forecasters isto make fortune tellers look good. Even now, Charlie [Munger] and I continue to believe that short-term market forecasts are poison and should be kept locked up in a safe place, away from children and also from grown-ups who behave in the market like children."</li>
        <li>"We don't get paid for activity, just for being right. As to how long we'll wait, we'll wait indefinitely."</li>
    </ul>

</article>

<aside class="about">
    <header>
        <h1> How to use Stocktails </h1>
        <p> A collection of tools to cover the entire investment process </p>
    </header>
    <section>
        <hgroup>
            <h1> Stock quotes </h1>
            <h2> Price, Volume, Ratios, etc. </h2>
        </hgroup>
        <p> Keep track of your stocks' movements </p>
    </section>
    <section>
        <hgroup>
            <h1> Fundamentals </h1>
            <h2> Yearly and quarterly financials </h2>
        </hgroup>
        <p> Stock valuation and analysis </p>
    </section>
    <section>
        <hgroup>
            <h1> Portfolio building </h1>
            <h2> Optimize the performance of your assets </h2>
        </hgroup>
        <p> Sophisticated tools to diversify risk and boost performance </p>
    </section>
    <section>
        <hgroup>
            <h1> Discussion </h1>
            <h2> Forum </h2>
        </hgroup>
        <p> Share your investing ideas with other savvy investors </p>
    </section>
</aside>


<div class="clear"></div>
</div>

<footer>
    <p>
        Copyright &#169; 2014.
    </p>
</footer>

</body>

CSS

body {
    background-color: #fffbef;
}

.story p {
    line-height: 1.2;
    text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
    color: #093844;
}

.clear {
    margin: 0;
    padding: 0;
    clear: both;
}

img.img-right {
    display: block;
    float: right;
    border: none;
    padding: 2px;
    margin: 3px 6pt 3px 6px;
}

/* navigation menu */

nav#top-menu {
    width: 100%;
    height: 50px;
    //background-color: #fff2c1;
    margin: 0;
    padding: 0;
}

#top-menu ul {
    display: block;
    list-style-type: none;
    width: 600px;
    margin: 0 auto;
    padding: 0;
}

#top-menu ul li {
    margin: 0;
    padding: 0;
}

#top-menu ul li a {
    display: block;
    float: left;
    max-height: 25px;
    width: 100px;
    margin: 0;
    padding: 5px 0;
    font-family: sans-serif;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    color: #52736b;
    border-bottom: #fffbef solid 2px;
}

#top-menu ul li a:hover { border-bottom: #52736b solid 2px; }

/* header */

header h1 { margin-top: 0; }

header p {
    font-family: sans-serif;
    font-weight: bold;
    font-style: italic;
    font-size: 85%;
    margin: .25ex 12pt;
    color: #093844;
}

/* maindiv */

#maindiv {
    width: 1250px;
    margin: 0 auto;
    padding: 10px;
    background-color: #eec;
}

/* article */

article {
    width: 950px;
    float: left;
}

article h1 {
    font-size: 110%;
    margin-top: 12pt;
    padding-top: 3pt;
    border-top: 4px solid #52736b;
}

/* aside */

aside.about {
    float: right;
    width: 238px;
    background-color: #b7c4b1;
    margin: 3pt 6pt 3pt 6pt;
}

aside h1 { font-size: 110%; }
aside h2 { font-size: 90%; }
aside p {
    margin: 0 12pt;
    font-family: sans-serif;
    font-style: italic;
    font-size: 80%;
}

aside section h1 {
    padding-top: 3pt;
    border-top: 4px solid #4f5856;
}

aside header p {
    font-size: 85%;
}

aside section {
    padding: 5px 0 5px 0;
}

/* footer */

footer {
    background: #4f5856;
    clear: all;
}

footer p {
    color: #8c8e7e;
    font-size: 70%;
    font-family: sans-serif;
    text-align: center;
    margin: 0;
    padding: 10px 0;
}

LC

Answer 1

由于您的文章左侧浮动且文档中您的旁边位置较低，rules of floats表示

浮箱的外顶部可能不高于外顶部由先前的元素生成的任何块或浮动框的来源文件。

解决这个问题的方法是在文档中将你的旁边元素向上移动：

<强> jsFiddle example

<article class="story"></article>
<article class="story"></article>
<aside class="about"></aside>
<article class="story"></article>

Answer 2

只需添加clear: both;并修改您的html，就像在演示

中一样

aside.about {
float: right;
width: 238px;
background-color: #b7c4b1;
margin: 3pt 6pt 3pt 6pt;
clear: both;
}

HTML

<header></header>
<aside class="about"></aside><!-- moved -->
<article class="story"></article>

Demo

为什么我在网页上这么低？

2 个答案: