CSS设计web浮动错误(低分辨率vs高分辨率)

时间:2012-08-04 04:53:40

标签: css css-float

我有一个浮动css的问题..它在低分辨率上是完美的,但它在高分辨率上打破了。我有两个列,左边和右边,每个都是浮动的:左边和浮动:右边。当我在低分辨率下运行时,它是完美的显示。像这样:

enter image description here

但是当我以高分辨率运行它时,就像这样:

enter image description here

以下是一些代码: 的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;}

有任何建议如何解决?

非常感谢。

1 个答案:

答案 0 :(得分:0)

只需在内容上设置宽度,以便始终保持所有宽度相同

感谢Torr3nt