爲什麼內聯塊不能對齊水平並排的父容器div內的兩個div？

我有這樣爲什麼內聯塊不能對齊水平並排的父容器div內的兩個div？

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<style> 
    *{ 
     margin:0px; 
     padding:0px; 
    } 
    <!--Resetter rules for browsers--> 
    #bodyContainer { 
     border:green 2px solid; 
    } 
    body { 
     border:black 2px solid; 
     background-color : grey; 
     padding:5px; 
    } 
    #header { 
     background-color : red; 
     width:70%; 
     height:80px; 
     border:black 2px solid; 
     padding:5px; 
    } 
    #header1 { 
     display:inline-block; 
     width:50%; 
     border:green 2px solid; 

    } 
    #header2 { 
     display:inline-block; 
     width:50%; 
     border:green 2px solid; 
    } 
</style> 
</head> 
<body> 
<div id="bodyContainer"> 
    <div id="header"> 
     <div id="header1"><h1>Welcome</h1></div> 
     <div id="header2"><h1>You Get to choose better !! </h1></div>    
    </div> 
    <div id="content"> 
     <div id="contentHeader"> 
      <p>You Select ... We Serve </p> 
     </div> 
     <div id="nav"> 
      <ul id="navmenu"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Electronics</a></li> 
       <li><a href="#">Fashions</a></li>     
      </ul> 
     </div> 
    </div> 
    <div id="sidebar"> 
    </div> 
    <div id="footer"> 
     <p>WebApp Version Numbered v1.0. All rights Reserved. </p> 
    </div> 
</div> 
</body> 
</html>

一個簡單的HTML模板，但是，當我設置寬度爲50％，其ID作爲header1和header2他們往往不佔有父容器DIV ID的整個空間的div header並且水平並排排列。爲什麼這樣？我在這裏錯過了什麼嗎？請解釋基礎知識，因爲我是HTML和CSS的新手。

來源

2015-04-23 StrugglingCoder

檢查[小提琴]（http://jsfiddle.net/JavaUIDeveloper/pc4a5rr0/） –

第一件事情就是從#header刪除padding，然後你給2px邊框都#header1和#header2刪除它border: 2px solid green;

而另一件事是display:inline-block需要空白的HTML。因此，請刪除div #header1和#header2之間的空格。

像：<div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>

這裏也是我給vertical-align:top作出然後垂直上方。

*{ 
 
     margin:0px; 
 
     padding:0px; 
 
    } 
 
    <!--Resetter rules for browsers--> 
 
    #bodyContainer { 
 
     border:green 2px solid; 
 
    } 
 
    body { 
 
     border:black 2px solid; 
 
     background-color : grey; 
 
     padding:5px; 
 
    } 
 
    #header { 
 
     background-color : red; 
 
     width:70%; 
 
     height:80px; 
 
     border:black 2px solid; 
 
    } 
 
    #header1 { 
 
     display:inline-block; 
 
     width:50%; 
 
     vertical-align: top; 
 
    } 
 
    #header2 { 
 
     display:inline-block; 
 
     width:50%; 
 
    vertical-align: top; 
 
    }

<div id="bodyContainer"> 
 
    <div id="header"> 
 
     <div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>    
 
    </div> 
 
    <div id="content"> 
 
     <div id="contentHeader"> 
 
      <p>You Select ... We Serve </p> 
 
     </div> 
 
     <div id="nav"> 
 
      <ul id="navmenu"> 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">Electronics</a></li> 
 
       <li><a href="#">Fashions</a></li>     
 
      </ul> 
 
     </div> 
 
    </div> 
 
    <div id="sidebar"> 
 
    </div> 
 
    <div id="footer"> 
 
     <p>WebApp Version Numbered v1.0. All rights Reserved. </p> 
 
    </div> 
 
</div>

檢查Fiddle.

來源

2015-04-23 06:25:40 ketan

P.S. vertical-align：middle不是垂直對齊容器div內的兩個div嗎？爲什麼這樣？請解釋。 – StrugglingCoder

你應該使用'line-height：80px;'來表示。 – ketan

#header1 { 
    display:inline-block; 
    width:49%; 
    border:green 2px solid; 
    float: left;} 
    #header2 { 
     display:inline-block; 
     width:49%; 
     border:green 2px solid;float: right }

寬度應49％爲界也被設定爲2 PX所以50％將安排在div一個下方的另一個，並且任何值小於50％就可以了。

來源

2015-04-23 06:23:58 Dreamweaver

試試這個..

#header { 
    background-color: red; 
    width: 70%; 
    height: 100%; 
    border: black 2px solid; 
    padding: 5px; 
}

U可以響應正常。

來源

2015-04-23 06:25:33

在您的例子，有兩個問題：

第一個，你聲明50% + 4px邊境各，總這些頭盒具有width > 100%（父母），他們不能並肩。

第二個，如果你刪除邊框，它們之間是一個空格（由代碼中的換行符引起）。

您可以刪除白色字符他們

<div id=header1>content</div><div id=header2>content></div>

http://jsfiddle.net/z4pybf6x/

之間

或使用float代替inline-block。

當你對這兩個元素使用float: left時，不要忘記清除後，例如。將overflow: hidden添加到#header。

#header {overflow: hidden} 
#header1, #header2 {float: left; border: 0; width: 50%;} /* no display: inline-block needed */

http://jsfiddle.net/z4pybf6x/1/

來源

2015-04-23 06:26:09 panther

這裏是fiddle

*{ 
     margin:0px; 
     padding:0px; 
    } 
    <!--Resetter rules for browsers--> 
    #bodyContainer { 
     border:green 2px solid; 
    } 
    body { 
     border:black 2px solid; 
     background-color : grey; 
     padding:5px; 
    } 
    #header { 
     overflow:hidden; 
     background-color : red; 
     width:75%; 
     height:80px; 
     border:black 2px solid; 
     padding:5px; 
    } 
    #header1 { 
     display:inline-block; 
     width:35%; 
     border:green 2px solid; 
     background: red; 
     vertical-align: top; 
    } 
    #header2 { 
     display:inline-block; 
     width:50%; 
     border:green 2px solid; 
     background: red; 
     vertical-align: top; 
    }

來源

2015-04-23 06:43:36

P.S. vertical-align：middle不是垂直對齊容器div內的兩個div嗎？爲什麼這樣？請解釋。 – StrugglingCoder

我只是在中間對齊它，它的工作。我更新了小提琴，你可以檢查。 –

爲什麼內聯塊不能對齊水平並排的父容器div內的兩個div？

回答

相關問題