HTML中的Div不随CSS向左浮动_Html_Css

HTML中的Div不随CSS向左浮动

html css

HTML中的Div不随CSS向左浮动,html,css,Html,Css,我的类名为“header body right”的div似乎没有浮动到名为“header body Center”的div的左侧，我不明白为什么，这是我的HTML <!DOCTYPE HTML> <HTML> <HEAD> <TITLE> </TITLE> <meta charset="UTF-8" /> <link href="main.css" rel="stylesheet" type="

我的类名为“header body right”的div似乎没有浮动到名为“header body Center”的div的左侧，我不明白为什么，这是我的HTML

    <!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE>  </TITLE>
  <meta charset="UTF-8" />
  <link href="main.css" rel="stylesheet" type="text/css">
  <META NAME="Generator"    CONTENT="Notepad">
  <META NAME="Author"       CONTENT="00">
  <META NAME="KEYWORDS"     CONTENT="" />
  <META NAME="DESCRIPTION"  CONTENT="" />
 </HEAD>

 <BODY>

    <div class="header-top">

    </div>

    <div class="header-body">

        <div class="header-body-centre">
            <div class="logo">
            <img src="logo.png" />
            </div>
        </div>

        <div class="header-body-right">
            test
        </div>

    </div>



    <div class="navbar">

    </div>

    <div class="content-container">

    </div>
 </BODY>

</HTML>

有人知道为什么吗？我曾尝试过浮动收割台波西中心，并减小收割台主体右侧的宽度，但没有任何效果。谁能看出我做错了什么？我没有主意了。谢谢。

为了使两个元素并排，必须使两个元素浮动。此css浮动。标题正文也位于中间左侧，导致元素并排显示

.header-body-centre
{
    margin: 0 auto;
    height:100%;
    width:70%;
    float: left;
}

由于浮动元素的行为方式，您以前的样式设置不起作用。当一个元素浮动时，它将从文档的正常流中移出。它会向左或向右移动，直到它接触到它的包含框或另一个浮动元素的边缘

为了使两个元素并排，必须浮动两个元素。此css浮动。标题正文也位于中间左侧，导致元素并排显示

.header-body-centre
{
    margin: 0 auto;
    height:100%;
    width:70%;
    float: left;
}

给你，伙计：

太好了，谢谢你。但是现在我这样做了，div不在中心。有没有办法解决这个问题，或者我必须在页眉主体中心左侧放置另一个宽度为15%的div？将页眉主体中心包裹在一个宽度约为85%的新div中（如果内容溢出到下一行，可能需要调整）。使用边距设置新div的样式：0 auto；太好了，谢谢你。但是现在我这样做了，div不在中心。有没有办法解决这个问题，或者我必须在页眉主体中心左侧放置另一个宽度为15%的div？将页眉主体中心包裹在一个宽度约为85%的新div中（如果内容溢出到下一行，可能需要调整）。使用边距设置新div的样式：0 auto；

.header-body-centre
{
    height:100%;
    width:70%;
    float:left;
    margin-left:15%;
    background-color: yellow; /* remove this */
    margin-left:
}

.header-body-right
{
    width:15%;
    height:100px;
    float:left;
    background-color: red; /* remove this */

}