封装布局和DIV问题

问题描述：

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

我试图与下面的CSS和HTML。浏览器全宽并且在浏览器调整大小时加扰，看起来很好。我希望元素在BROWSER调整大小时在那里，并且水平滚动必须出现。对于网络编程来说很新颖。文本对齐：定位*列的中心不起作用，因为每当左侧或右侧添加新文本时，它将被重新定位，并且ROW1（文本）和ROW2（按钮）中的*列元素也不会出现同一条线。也就是说，文本显得有点偏右，并且按钮稍微离开了一点。文本对齐在这里不起作用。

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="#">[email protected]</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">

你需要响应式布局，如“响应式网格”或“基础” – Shanimal 2013-04-28 07:31:14

你能解释一下吗？请给我一个教程的链接吗？ – 2013-04-28 07:33:02

http://css-tricks.com/responsive-data-table-roundup/ – Shanimal 2013-04-28 07:36:22

答

如果你想在中心对齐你的对象，有几种不同的方法。首先，有你现在不需要的text-align:center;。也有object-position:center;这基本上是一样的，但有一个对象。这种方式并不是最好的，但你可以在任何一方添加一定比例的padding，但不建议这样做。最后，有alignment-adjust:central;。这可能不适合你的情况，但只是尝试所有这些，看看他们的工作。祝你好运！

我明白了。我需要绝对的价值才能发挥作用。相对定位永远不会给我我需要的东西。谢谢！ – 2013-04-28 08:09:15

绝对值的问题在于，它不会影响或受到任何其他元素的影响，特别是在屏幕尺寸不同的情况下 – Max 2013-04-28 15:48:56

答

这只是一个小错误我在CSS中发现，我不知道这是否会帮助太多。您添加的div不被称为div，而是一个类。例如，如果你想样式CSS一个div，你可以这样做：

#divname { 
CSS for div goes here... 
}

在另一方面，如果你想一点点的风格添加到一个类时，你会是这样的：

.classname { 
CSS for class goes here... 
}

如果你想知道每种方法的区别是什么，答案很简单。 A class可以定义多个对象，而divs仅限于一个对象或元素。

我想要一个div类，我想我做的是正确的。 – 2013-04-28 07:44:53

如果您希望通过执行以下代码注释行来解决问题，请执行以下操作：/ **/ – Max 2013-04-28 07:48:40

如何在不使用文本对齐方式的情况下居中对齐内容：center？ – 2013-04-28 07:51:24

答

一种可行的方法是将包装宽度设置为一个固定值（例如800px的东西）。只要这个宽度比你在这个包装器中放置的所有内容更长，那么一切都应该按你的意愿工作。当窗口小于包装的宽度时，浏览器将自动放置一个水平滚动条。

哦，是的。它工作正常。你有解决其他问题的方法吗？ – 2013-04-28 07:48:41

林不知道我理解你的其他问题。请澄清 – Dsel 2013-04-28 07:51:30

如何在不使用文本对齐的情况下居中对齐内容：center？相反，你也可以建议我如何在'wrapper'div（width：960px;）的中心创建一个容器，让我的ROW1文本位于Row2按钮的上方（请参阅图像）？ – 2013-04-28 07:53:43

封装布局和DIV问题

相关推荐