Question

我有一个像这样的简单HTML模板

<!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>

但是当我将id为header1和header2的div的宽度设置为50％时，它们往往不会占用ID为header的父容器div的整个空间。水平并排排列。为什么会这样？我在这里错过了什么吗？请解释基础知识，因为我是HTML和CSS的新手。

Answer 1

试试这个..

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

U可能会正确回应。

Answer 2

首先从padding移除#header，然后为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垂直顶部。

＆＃13;

*{
        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;
    }

＆＃13;

<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>

＆＃13;

检查Fiddle.

Answer 3

在您的示例中，存在两个问题：

第一个，你为每个边框声明了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/

Answer 4

#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％的值都可以实现。

Answer 5

以下是fiddle

RCurl

为什么内联块不能将父容器div中的两个div并排水平并排？

5 个答案: