文章/答案/技术大牛

发布

社区首页 >问答首页 >Liquid布局问题

问Liquid布局问题
EN

Stack Overflow用户

提问于 2011-12-29 05:45:43

回答 1查看 168关注 0票数 0

需要帮助来解决一些解决问题的项目，我目前正在工作。

看看这里，http://viewlike.us/?url=tinyurl.com%2Fsoreso&button.x=75&button.y=17&button=Submit

css/布局是作为流动布局完成的，但正如您可以注意到的那样，从800*600开始，列和右侧的搜索框开始重叠。

在更高的分辨率下，比如1920*1200，它开始看起来有点丑陋，特别是右边的搜索框看起来有点拉长。

仅当以1200*800或下一分辨率查看时，该站点才看起来正常。

我能对这两者做些什么呢？

1)支持800*600及以上

2)防止它在较高分辨率下看起来很丑陋

我还在考虑添加一个特定于媒体查询的样式表，以使其适用于智能手机、平板电脑等。

下面是该页面和它的css

index.php

           <html>
           <body>
           <div id="wrap">

  <div id="header">



<?php include("header.inc.php"); ?>






    <div id="menu" align="left">
        <div class="top_menu_left">

        <li><a href="index.php?cityid=0"><?php echo $lang['HOME_LINK']; ?></a></li><li>|</li>

        <li><a href="<?php echo $postlink; ?>">Subscribe</a></li>
            </div>







            <?php if($auth->id) { ?>
            <div class="top_menu_right">
            <li><a href="index.php?view=myaccount" title="">My Account</a></li><li>|</li>
            <li><a href="index.php?view=bookmarks" title="">Watch List</a></li><li>|</li>

            <li><a href="index.php?view=login&amp;logout" title="">Logout</a></li>
            <?php }else{ ?>
            <li><a href="index.php?view=login" title="">Login</a></li><li>|</li>
            <li><a href="index.php?view=register" title="">Sign up</a></li>
            </div>

            <?php } ?>      


    </div>
    </div>

        <!--END OF MENU DIV CONTENT-->

    <div align="center"><div id="bar"></div></div><br />

    </div>








           <div id="content">

            <div id="left_content"> <?php include('left_sidebar.php'); ?> </div>


                <div id="main_content"> 


             <?php include("path.inc.php"); ?> 

                     <div style="display:none;"><?php echo "<!--#&88;#&90;#&101;#&114;#&111;".
                     "#&83;#&99;#&114;#&105;#&112;#&116;#&115;#&46;#&99;#&111;#&109;-->"; ?></div>

            <?php echo $content;unset($content);?>

           </div>



    <div id="right_content"> 

    <?php
        if($xview != "post" && $xview != "postimg")
        {
        ?>



    <div class="right_top" align="center"><?php echo $lang['SEARCH']; ?> <?php include("search.inc.php"); ?> </div>

    <?php
        }
        ?>

           </div>

     </div>



      <div style="clear:both" ></div>
      <div style="clear:both" ></div>

    <div id="footer" align="center"> 

    <div  class="footer_menu">
<li><a href="about.php">About us</a></li> <li>|</li>
<li><a href="terms.php"><?php echo $lang['TERMS_OF_USE']; ?></a></li><li>|</li> 
<li><a href="privacy.php"><?php echo $lang['PRIVACY_POLICY']; ?></a>         </li><li>|</li> 
<li><a href="contact.php">Contact us</a></li> <li>|</li>
</div>

<div  class="footer_menu2">
<strong>Copyright &copy; 2011 <?php if(($y=date("Y")) != 2011) echo "- $y"; ?>   <?php echo $site_name; ?>. All Rights Reserved </strong>
</div>
</div>  
    </div>
    </body>
    </html>

Style.css

                             html { -webkit-text-size-adjust: 70%;  }
body {  margin:0px; padding:0px;font-family:Arial, Helvetica, sans-serif;  }
b           { font-size:14px;}
#wrap { width:100%; height:100%; background-color:#FFFFFF; padding: 0;}

#header {
padding: 10px;

height:251px;
    }

  #menu { width:100%; height:2.2em; margin-top:1%;  background:#80b2e4; border-     radius:10px; -moz-border-radius:10px; -webkit-moz-border-radius:10px;}
 .top_menu_left {float:left; width:86%;height:35px; margin-left:3%;}
 .top_menu_left li a    { color:#fff !important; }
 .top_menu_left li a:hover  { color:#336699 !important; }

 .top_menu_right {float:right; width:17%;;height:1.2em;}
 li{list-style:none; float:left;  color:#74677E;font-size:70%;font- weight:bold;font-     family:Arial, Helvetica, sans-serif; text-align:left; padding:0 5px;  -top:9px;  color:#fff;}

  .top_menu_left li {padding-right:1%; color:#fff;}
  .top_menu_right li {padding-right:5%; color:#fff;}

  #searchbar { width:100%; height:auto;margin-top:8%;}

  #top_search {width:100%; height:auto;}
  #bottom_search {width:89%; height:auto;padding-left:10.5%;font-size:75%;}

  .sarch_box { width:10%; height:auto; float:left; margin-left:1%;font-size:75%;}

  .box_1 { width:20%; height:auto; float:left;font-size:85%;}
  box_1 input { width:80%; height:1.2em;font-size:85%;}
  .box_1 select { width:70%; height:1.5em;font-size:85%;}

  .box_2 {width:2%; height:auto; float:left;}

  #content { width:87%; height:auto; margin-left:11%; margin-top:0; }
  #left_content { width:7%; height:auto; float:left; }
  #left_searchbar_title {width:95%;height:2%;padding-top:1%;padding-bottom:1%;padding-   left:5%;background-color:#A5D959;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
  #left_sidebar_content{width:100%;height:2%;background-color:#EFFFD8;font-family:Arial,   Helvetica, sans-serif;font-size:75%;}

  #main_content { width:59%; height:auto;float:left;  }
  .main_content_header  {margin-left:2%;color:black;font-size:100%;font- family:Arial, Helvetica, sans-serif;font-weight:bold;margin-bottom:5%;}

  .content_header {width:70%; height:auto; margin-left:3%;}

   /*.left_1 {margin-left:2%;width:.05em; height:100px;background- image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left;padding-left:2px;    }*/
   .left_1 {margin-left:2%;width:.05em; height:100px;background-image:none;background-   repeat:repeat-y;float:left;padding-left:2px; }
 /*.left_6 { width:.05em;height:100px;background-  image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left; }*/
.left_6 { width:.05em;height:100px;background-image:none;background-repeat:repeat- y;float:left; }

.left_content_middle    {width:95%;float:left;font-size:80%;font-family:Arial, Helvetica, sans-serif; background:white; border:1px solid #c6c6c6;border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px}

.content_title {padding:2%; text-align:center; color:black; <!--#336699;-->font-weight:bold;font-size:100%;font-family:Arial, Helvetica, sans-serif; }

.content_line{size:2px; width:95%; background-image:url(images/horizotal-line.gif);}

.left_2 { margin-left:3%; width:21.5%; height:auto; float:left; }
.left_3 { width:23.5%;height:auto;float:left;}
.left_4 { width:23.5%;height:auto;float:left;}
.left_5 { width:23.5%;height:auto;float:left;}


#right_content { width:20%;height:auto;background-color:white;float:left;margin- left:1%;padding:10px; border:1px solid #c6c6c6; border-radius:10px; webkit-border- radius:10px; -moz-border-radius:10px}
.right_top { width:100%; height:auto; color:white; font-size:100%; color:#336699;}

.Left_portion { width:45%; height:auto; float:left;padding-left:8%;}

.right_portion { width:45%; height:auto; float:left;}

.right_content_title {color:#BB532E;font-weight:bold;font-size:70%;font-family:Arial, Helvetica, sans-serif;padding-bottom:4%;padding-top:5%; }
.right_content_body {color:#5E6472;font-size:70%;font-weight:bold;font-family:Arial, Helvetica, sans-serif;padding-bottom:3%;}



.menu_bar { width:10%; font-family:Arial, Helvetica, sans-serif; color:red; float:left; font-size:50%;}

.gap {width:35%;}

  #footer   {height:40px;width:100%;margin:auto;text-align:center;text- align:center;margin-top:2%;background:url('images/footer_bg.png') repeat-x;   line-height:40px; color:white;}
  .footer_menu {
  color: white;
  float: right;
  height: 1.2em;
  -left: 3%;
  width: 70%;
  }
    .footer_menu li {
     color: white;
     padding-right: 1%;
    }
    .footer_menu li a   { color:#fff; text-decoration:none;}
    .footer_menu li a:hover { text-decoration:underline}
    .footer_menu2 {
    background: url("images/footer_bg2.png") repeat-x scroll 0 0 transparent;
    color: grey;
    float: left;
    font-size: 13px;
    margin-top: 21px;
    width: 100%;
    }
   .footer_menu strong  { font-weight:lighter; color:#666}

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-12-29 05:56:25

尝试使用max-width和min-width。

我猜从流畅的布局来看，你是在使用某种形式的百分比。在这种情况下，在特定大小之后，列等将变得太大。

您还很可能希望尝试使用最小宽度来阻止列相互重叠。您可以通过使用overflow:hidden来防止文本进入其他列，但是，您可能更好的做法是使列具有最小宽度，并使字体更小。

http://reference.sitepoint.com/css/max-width

http://reference.sitepoint.com/css/min-width

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8661655

复制

相似问题

问Liquid布局问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Liquid布局问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Liquid布局问题
EN