0

我对 float css 有疑问。它在低分辨率下非常完美，但在高分辨率下就坏了。我有两列，左和右，它们分别是float：left和float：right。当我以低分辨率运行时，它是完美的显示。像这样：

在此处输入图像描述

但是当我以高分辨率运行它时，会变成这样：

在此处输入图像描述

这是一些代码：index.php

<body>
    <div id="Content">
        <div id="top-left">
            <div class="floatLeft" style="padding-top:34px">
                <hr align="left" class="line1">
                <div id="language">
                    <?php
                        include("include/language.php");
                    ?>
                </div>
                <div class="clearBoth"></div>
            </div>
            <div class="imageIndex"><img src="images/coba.jpg"></div>
            <div class="clearBoth"></div>
        </div>

        <div id="top-right">
            <div id="csStatus" style="margin-left:-17px">
                <?php
                    include("include/status.php");
                ?>
            </div>
            <div style="height:75px">
                <?php
                    include("include/marketing.php");
                ?>
            </div>

            <div id="captionSlide">

            </div>
            <div class="floatLeft" style="padding-top:113px"><hr class="line2"></div>
        </div>
        <div class="clearBoth"></div>

        <div class="floatLeft" style="margin-left:87px;margin-top:-110px;">
            <img src="images/side.png">
        </div>
        <div id="contentTop">
            <div id="logo">
                <?php
                    include("include/logo.php");
                ?>
            </div>
            <div class="floatLeft" style="margin-left:54px"><img src="images/ctr.png"></div>
            <table id="search">
                <?php
                    include("include/search.php");
                ?>
            </table>
            <br>

            <div id="menuLeft">
                <?php
                    include("include/menu-left.php");
                ?>
            </div>
            <div id="menuRight">
                <?php
                    include("include/menu-right.php");
                ?>
            </div>
            <br><br><br><br>

            <div id="contentWeb">
                <div id="contentLeft" style="float:left;">
                    <table id="leftTable">
                        <tr>
                            <td style="width:195px">
                                <div id="stockist">
                                    PROJECT<br>
                                    <img src="images/stockist.jpg" class="imageBorder">
                                </div>
                            </td>
                            <td style="width:230px;vertical-align:top;">
                                <span id="agenda">
                                    AGENDA
                                </span><br><br>

                            </td>
                        </tr>
                    </table>
                </div>
                <div id="contentRight" style="float:right;">
                    <table id="rightTable">
                        <tr>
                            <td style="width:230px;vertical-align:top;">
                                <span id="latestProduct">
                                    LATEST PRODUCT
                                </span><br><br>
                                <table>

                                </table>
                            </td>
                        </tr>
                    </table>
                </div>  
            </div>
        </div>
        <div class="clearBoth"></div>
        <div id="Footer">
            <div id="contentFooter">
                PT. TANGGA MAS JAYA MAKMUR scaffolding | Published by. BixelLite &copy; 2012
            </div>
        </div>
    </div>
</body>

这是一些CSS：

#Content {
margin:0px auto;}

.floatLeft{
float:left;}

#top-left{
float:left;}

#top-right{
float:right;}

#Footer{
background-color:#90bc21;
width:546px;
height:39px;
text-align:right;}

任何建议如何解决它？

非常感谢。

4

1 回答 1

0

只需在您的内容上设置一个宽度，以使所有内容始终保持相同的宽度

感谢 Torr3nt

于 2012-08-04T08:42:13.353 回答