包装器布局和div问题 [英] Wrapper layout and div problems

问题描述

图片

http://oi42.tinypic.com/51oew1.jpg

我尝试使用以下CSS和HTML。它看起来不错，当浏览器是全宽度和扰乱时，浏览器的大小。我想要的元素是那里的地方，当BROWSER的RESIZED时出现水平滚动。相当新的web编程。文本对齐：定位中心列的中心将不工作，因为每次在左边或右边添加新文本时，它将被重新定位，并且ROW1（文本）和ROW2（按钮）中的中心列元素也不会沿着同一行。也就是说，文本显示有点右，按钮有点左。文字对齐不会在这里工作。

I tried this with the following CSS and HTML. It looks fine when the browser is of full width and scrambled when browser is resized. I WANT the elements to be where there and a HORIZONTAL SCROLL has to appear when the BROWSER is RESIZED. Pretty new to web programming. Text-align:center for positioning the center column would not work because, every time a new text is added in the left or right, it gets relocated and also center column element in ROW1(text) and ROW2(Button) do not appear along the same line. That is, text appears a bit right and the button a bit left. Text-align won't work here.

CSS：

  @charset "utf-8";
  /* CSS Document */

  body
  {
       background-color:#000;
  }
  .wrapper
  {
      width:70%;
      margin:0 auto;
      padding:2px;
      background-color:#fff;
   }
   .second_row
   {
      padding:2px;
      margin-top:10px;
   }

   .center_container
   {
      width:30%;
      margin:0 auto;    
   }
   .left_container
   {
      width:33%;
      float:left;
   }
   .right_container
   {
      width:33%;
      float:right;
   }
   .topelements 
   {
      margin-top:0px;
      color:#777;
      padding:2px;
   }
   .topelements a:link
   {
      color:#29a3cc;
   }
   .topelements a:active a:hover
   {
      color:#29a3cc;    
   }
   .logo
   {

      overflow:hidden;
   }

HTML代码：

  <div class="wrapper"> 
    <span class="topelements float_left" >Mail us: <a href="#">[e-mail]</a></span>
    <span class="topelements float_right">Left links <a href="#">My xyz</a></span>
    <span class="topelements center_container">Welcome to xyz ! <a href="#">Sign in</a> or <a href="#">Signup</a>.</span>
   </div>
     <div class="wrapper second_row">
       <span class="left_container">Srini</span>
       <span class="right_container">Vas</span>
           <form class="center_container">
              <input type="text" placeholder="Goooooooooooo!" />
              <input type="submit" value="Search" />
           </form>
     </div>
     <div class="wrapper">

推荐答案

如果你想在中心对齐对象，有两种不同的方式。首先，有 text-align：center; ，你现在不需要。还有 object-position：center; 基本上做同样的，但是有一个对象。这种方式不是最好的，但你可以添加一定百分比的 padding 到任一方，但不推荐。最后，有 alignment-adjust：central; 。这可能不是完美的您的情况，但只是尝试所有这些，看看他们是否工作。祝你好运！

If you want to align you object in the center, there are a couple of different ways. First of all, there is the text-align:center; which you don't need right now. There is also object-position:center; which basically does the same, but with an object. This way isn't the best, but you could add a certain percentage of padding to either side but that's not recommended. Lastly, there's alignment-adjust:central;. This may not be perfect for your situation but just try out all of these and see if they work. Good luck!

这篇关于包装器布局和div问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！