html - 使用 float 的 CSS 定位故障排除

Question

我不能完全让我的场景在 JSFiddle 中发挥作用，所以我将链接发布到我目前正在处理的网页:http://www.lymemd.org/indexmm4.php

JS Fiddle

一些相关的CSS如下:

#leftcolumn {
   width: 50%;
   float: left;
}
#rightcolumn {
   width: 50%;
   float: left;
}
#twitter {
   min-height: 250px;
   margin-top: 10px;
   margin-right: 15px;
}
#whatsnew {
   min-height: 500px;
   background: #f0f7cb;
   outline:#FFFFFF solid thick;
   margin-top: 15px;
   margin-right: 15px
}
#supportus {
   min-height: 445px;
   margin-top: 10px;
   margin-bottom: 20px;
   background: #f0f7cb;
   outline:#FFFFFF solid thick;
}
#dianerehm {
   min-height: 200px;
   background: #f0f7cb;
   outline:#FFFFFF solid thick;
}

下面是我遇到问题的 HTML 部分:

<div id="rightcolumn">         
    <div id="supportus">
    <h6>Support Us</h6>

            <img src="images/race2.jpg" width="180" height="360"/>


    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" style="display: inline-block;">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="DM87UZYCZW5CU">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" style="display: inline-block;">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="DM87UZYCZW5CU">
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form>

我想让文本居中在“race2.jpg”图像的右侧，沿着当前空白的列向下。无论如何知道如何做到这一点？我不确定我是否需要更多 float 命令或内联命令，但我认为这应该是可能的。

非常感谢您的帮助。

Answer 1

我会尝试简单地用 DIV 包装您的图像，并为文本包含另一个 DIV:

<div id="rightcolumn">         
    <div id="supportus">
        <h6>Support Us</h6>
        <div style="float:left">
            <img src="images/race2.jpg" width="180" height="360"/>
        </div>
        <div style="float:left; text-align:center">
            CENTERED TEXT HERE!
        </div>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" style="display: inline-block; clear:left;">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="DM87UZYCZW5CU">
            <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
        </form>

        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" style="display: inline-block;">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="DM87UZYCZW5CU">
            <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
        </form>
    </div>
</div>