Question

我无法让我的场景在JSFiddle中播出，所以我将链接发布到我目前正在处理的网页：http://www.lymemd.org/indexmm4.php

一些相关的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”图像右侧，该图像沿着当前空白区域的列向下移动。无论如何知道如何做到这一点？我不确定我是否需要更多浮点命令或内联命令，但我认为它应该是可能的。

非常感谢帮助。

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>

Answer 2

不完全确定您正在寻找的布局，但这样的事情可能只是一个开始：JS Fiddle

#leftcolumn {
    width: 50%;
    float: left;
}
#bigimage {
    position: absolute;
}
#rightcolumn {
    width: 500px;

}

#whatsnew {
    min-height: 300px;
    background: #f0f7cb;
    outline:#FFFFFF solid thick;
    margin-top: 15px;
    margin-right: 15px
}

#supportus {
    padding-top: 30px;
    width: 700px;
    min-height: 370px;
    margin-bottom: 20px;
    background: #f0f7cb;
    text-align: center;
}
#dianerehm {
    min-height: 200px;
    background: #f0f7cb;
    outline:#FFFFFF solid thick;
}
form {
    width: 130px;
    margin: auto;
}

使用Float进行CSS定位故障排除

2 个答案: