封裝佈局和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">

來源

2013-04-28 Srini Vas

你需要響應式佈局，如「響應式網格」或「基礎」 – 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:03:13 Max

我明白了。我需要絕對的價值才能發揮作用。相對定位永遠不會給我我需要的東西。謝謝！ – 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僅限於一個對象或元素。

來源

2013-04-28 07:43:41 Max

我想要一個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:44:52 Dsel

哦，是的。它工作正常。你有解決其他問題的方法嗎？ – 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問題

回答

相關問題