CSS 设计网页浮动错误（低分辨率与高分辨率）答案

【问题标题】：CSS design web float error (low-res vs hi-res)CSS 设计网页浮动错误（低分辨率与高分辨率）
【发布时间】：2012-08-04 16:42:13
【问题描述】：

我对 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;}

有什么建议可以解决吗？

非常感谢。

【问题讨论】：

在这个问题中向我们展示您的代码或放一些小提琴。
我已经用代码和 css 更新了它。谢谢
只需在您的内容上设置一个宽度，以使所有内容始终保持相同的宽度。

标签： css css-float

【解决方案1】：

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

感谢 Torr3nt

【讨论】：