水平對齊使用邊距和浮動的div

我有3個div - 每個在寬度爲100％的父div中。 CSS：水平對齊使用邊距和浮動的div

.parentDiv { 
    height: 454px; 
    width: 100% auto; 
} 
.Div1, .Div2, .Div3{ 
    display: block; 
    position: relative; 
    text-align: center; 
    height: 434px; 
    margin-top: 10px; 
    margin-bottom: 10px; 
} 
.Div1 { 
    margin-left: 10px; 
    float: left; 
    width: 351px; 
} 
.Div2 { 
    width: 351px; 
    padding: 0px; 
    margin: auto; 
    display: block; 
} 
.Div3 { 
    margin-right: 10px; 
    float: right; 
    width: 351px; 
}

Div以與它們在CSS中相同的方式排列在HTML中。然而，這樣做的結果是左邊的元素（Div1）位於正確的位置，所謂的居中元素居中（Div2），儘管它的邊緣可以填充整個父級Div。因此，我認爲這會導致Div3溢出父Div並垂直「摺疊」。

我真的很想知道的是如何對齊div，使左邊有一個，一個居中，右邊一個。以前有關類似問題的問題在這種情況下似乎沒有幫助：/如果有辦法縮短Div2的利潤率，以便他們可以讓所有的Div在母公司中正確對齊 - 我真的很想知道如何（最好不要使用絕對像素測量）

這可能毫無意義 - 但我真的很感謝所有的建議/答案:) 乾杯

附加說明：這是它當時是什麼： Div1Div2Div3 我想要的： Div1 Div2 Div3 這段長度等於parentDiv

HTML（在本節）

<div class="parentDiv"> 

     <div class="Div1"> 
      <!--Insert code here--> 
     </div> 

     <div class="Div2"> 
      <!--Insert code here--> 
     </div> 

     <div class="Div3"> 
      <!--Insert code here--> 
     </div> 

    </div>

來源

2015-06-30 HazzaMcJazza

你能提供你的html代碼嗎？ –

類似於[此帖]（http://stackoverflow.com/questions/30141292/how-to-create-a-3-column-responsive-layout）看看它是否有幫助。 – Stickers

不用擔心，設法使用一些jQuery的最終解決它：

$(document).ready(function(){ 
    var width = $(".parentDiv").css("width") 
    var width = width.replace("px",""); 
    var width = parseInt(width,10); 
    var val1 = width-1073; 
    var val2 = val1/2; 
    $(".Div2").css("margin-left",val2); 
    $(".Div2").css("margin-right",val2); 

    $(window).resize(function(){ 
     var width = $(".parentDiv").css("width"); 
     var width = width.replace("px",""); 
     var width = parseInt(width,10); 
     if(1073>width) { 
      $(".Div3").css("display","hidden") 
     } 
     else { 
      var val1 = width-1073; 
      var val2 = val1/2; 
      $(".Div2").css("margin-left",val2); 
      $(".Div2").css("margin-right",val2); 
     } 
    });

我知道這是不是寫過（我真的很新jQuery和JavaScript）的最有效的，也沒有漂亮的代碼 - 但它確實工作:)我想道歉的任何人誰是足夠的嘗試破譯我的令人震驚的解釋：/

請注意，我也設置Child Div的定位類型爲絕對，然後Div1爲左：0;和Div3作爲正確的：0;

來源

2015-06-30 21:53:32 HazzaMcJazza

嘗試這樣做的DIV2：

.Div2 { 
     width: 351px; 
     padding: 0px; 
     margin: auto; 
     display: block; 
     margin: 0 auto; 
     float: left; 
    }

來源

2015-06-30 14:25:57

解決方案＃1

您可能會看到JSFIDDLE DEMO。

HTML代碼

<div class="parentDiv"> 
    <div class="Div1"> 
     Div 1 - Some text 
    </div>   
    <div class="Div2"> 
     Div 2 - Some text 
    </div>  
    <div class="Div3"> 
     Dive 3 - Some text 
    </div>   
</div>

CSS代碼

.parentDiv { 
    height: 454px; 
    width: 100% auto; 
} 
.parentDiv div{ 
    float:left; 
} 
.Div1, .Div2, .Div3{ 
    display: block; 
    position: relative; 
    text-align: center; 
    height: 434px; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    border: 1px solid #c4c4c4; 
} 
.Div1 { 
    margin-left: 10px; 
    width: 351px; 
} 
.Div2 { 
    width: 351px; 
    padding: 0px; 
    display: block; 
} 
.Div3 { 
    margin-right: 10px; 
    width: 351px; 
}

解決方案＃2

請通過FIDDLE DEMO。

下面是完整的源代碼：

我加入了利潤率左到所有3周的div。

代碼：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="content-type"> 
<style> 
.parentDiv { 
    height: 454px; 
    width: 100% auto; 
} 
.parentDiv div{ 
    /* float:left; */ 
} 
.Div1, .Div2, .Div3{ 
    display: block; 
    position: relative; 
    text-align: center; 
    height: 434px; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    border: 1px solid #c4c4c4; 
} 
.Div1 { 
    margin-left: 10px; 
    width: 351px; 
} 
.Div2 { 
    display: block; 
    margin-left: 361px; 
    padding: 0; 
    width: 351px; 
} 
.Div3 { 
    margin-left: 714px; 
    width: 351px; 
} 
</style> 
</head> 
<body> 
<div class="parentDiv"> 
    <div class="Div1"> 
     Div 1 - Some text 
    </div>   
    <div class="Div2"> 
     Div 2 - Some text 
    </div>  
    <div class="Div3"> 
     Dive 3 - Some text 
    </div>   
</div> 
</body> 
</html>

正如你將看到：

我從Div2刪除margin。
我爲.parentDiv div添加了新的css - 因此您可以從其他個人divs中刪除float。
您可能想要移除divs的BORDER。

我的建議

我建議使用響應斷點，使您的網頁響應。

來源

2015-06-30 14:29:05

我可能會做這個錯誤，但是當我嘗試這個時，所有的div都會轉移到父項的左側 - 而不是一個在直接中心，一個在最右側。 – HazzaMcJazza

我希望你使用的是與FIDDLE演示中給出的完全相同的代碼？ –

是的，我是：/對不起，我認爲我的描述失敗了。讓我換句話說：Div1應該在最左邊。然後，直到div2集中在parentDiv中間，然後是另一個間隙，直到Div 3，而不是它們全部浮動到parentDiv的左邊爲止，我希望它們如圖所示分離出來，從而Div2在其兩側都有空白在自動正確的長度中心它（希望有更多的意義）:) – HazzaMcJazza

如果您想要比浮動元素更好的解決方案，請將其更改爲display：inline-block元素。

.parentDiv > div { font-size: 1em; display: inline-block; vertical-align: top; } 
.parentDiv { font-size : 0; }

這工作響應，比浮動更好。浮動僅適用於浮動元素，不適用於設計佈局。這是一些前端開發者的一個虛假和最經常使用的技術。由於使用了浮動功能，您可以在頁面上看到數千噸的clearfix。它是粗俗的，廢話。

來源

2015-06-30 14:39:56

水平對齊使用邊距和浮動的div

回答

相關問題