1. 首页
  2. 问答
  3. div有点偏移

div有点偏移

2017-06-01 135 views
1

所以我想用CSS做一些样式，但我遇到了问题。div有点偏移

body { 
 
    margin: 0 auto; 
 
} 
 

 
#headLeft { 
 
    background-color: red; 
 
    height: 50px; 
 
    width: 30%; 
 
    display: inline-block; 
 
} 
 

 
#headRight { 
 
    background-color: blue; 
 
    height: 50px; 
 
    width: 70%; 
 
    margin-left: -4px; 
 
    display: inline-block; 
 
} 
 

 
#logo { 
 
    margin-left: 10px; 
 
    border-width: 1px; 
 
    border-color: red; 
 
    border-style: solid; 
 
}
<body> 
 
    <div id="headLeft"> 
 
    <div id="logo"> 
 
     Here's the logo! 
 
    </div> 
 
    </div> 
 
    <div id="headRight"></div> 
 
</body>

有人能告诉我为什么文本 “这里的标志！”使整个事情不起作用？标题的左边距离应该是15px。

奇怪的是，如果我删除文本（所以“这是徽标！”），一切都很完美&恢复正常！

截图结果没有任何文字，而这正是我想要的：

截图结果，如果我添加一些文本（这里：“标识”），其中红色矩形在左边是太多了上面：

来源

2017-06-01 zdzdk hjv

+0

你没有带告诉我们您的问题是什么，使得答案很难提供。 – DrunkDevKek

+0

添加* {box-sizing：border-box; }在CSS代码的顶部。 – Gerard

+0

我曾经有人删除它。我想要的是红框与蓝框在同一水平上。就那么简单。谢谢 –

回答

0

添加浮动：左;到#headleft

https://codepen.io/anon/pen/pwzeBZ

HTML

<div id="headLeft"> 

    <div id="logo"> 

     Here's the logo! 

    </div> 

</div> 

<div id="headRight"> 

</div>

CSS

body { 
    margin: 0 auto; 
} 

#headLeft {  
    background-color: red; 
    height: 50px; 
    width: 30%; 
    display: inline-block; 
    float: left; 
} 

#headRight {   
    background-color: blue; 
    height: 50px; 
    width: 70%; 
    display: inline-block; 
} 

#logo { 
    margin-left: 10px; 
    border-width: 1px; 
    border-color: red; 
    border-style:solid;   
}

来源

2017-06-01 16:54:53 Axion

+0

非常感谢你的工作！ –

+0

如果没有理由不能在此处发布工作代码，请在代码段中不要发布外部链接。此外，答案应该解释问题是什么以及解决方案为何解决问题。 –

0

更换display: inline-block;与float:left;可以解决这个问题。

body { 
 
    margin: 0 auto; 
 
} 
 

 
#headLeft { 
 
    background-color: red; 
 
    height: 50px; 
 
    width: 30%; 
 
    float: left; 
 
} 
 

 
#headRight { 
 
    background-color: blue; 
 
    height: 50px; 
 
    width: 70%; 
 
    margin-left: -4px; 
 
    float: left; 
 
} 
 

 
#logo { 
 
    margin-left: 10px; 
 
    border-width: 1px; 
 
    border-color: red; 
 
    border-style: solid; 
 
}
<body> 
 
<div id="headLeft"> 
 
    <div id="logo"> 
 
    Here's the logo! 
 
    </div> 
 
</div> 
 
<div id="headRight"> 
 
</div> 
 
</body>

来源

2017-06-01 16:55:33 Lal

1

只需使用display:flex财产，你的身体。

body { 
 
    margin: 0 auto; 
 
    display:flex; 
 
} 
 

 
#headLeft {  
 
    background-color: red; 
 
    height: 50px; 
 
    width: 30%; 
 
    display: inline-block; 
 
} 
 

 
#headRight {   
 
    background-color: blue; 
 
    height: 50px; 
 
    width: 70%; 
 
    margin-left: -4px; 
 
    display: inline-block; 
 
} 
 

 
#logo { 
 
    margin-left: 10px; 
 
    border-width: 1px; 
 
    border-color: red; 
 
    border-style:solid; 
 
    display: inline-block; 
 
}
<body> 
 

 
<div id="headLeft"> 
 

 
    <div id="logo"> 
 

 
     <p>Here's the logo!</p> 
 

 
    </div> 
 

 
</div> 
 

 
<div id="headRight"> 
 

 
</div> 
 

 
</body>

来源

2017-06-01 16:56:12

1

的display:inline-block是什么引起的问题，并没有真正做到这一点的最好办法。它会导致元素的布局方式不同于其他元素（内联元素与块元素的垂直对齐方式不同），并且会导致CSS Box模型以不同的方式计算总大小。

相反，只使用float:left两个头，然后应用clear:both（实际上可能只是clear:left）到最后一个浮动元素，清除浮动，并回到常规布局之后出现的下一个元素。

另外：

的CSS Box Model每个元件分割成一个“盒子”，其具有用于其内容的区域。默认情况下，当您指定height或width时，您只能为此最内层内容区域指定大小。在该区域之外是填充，接着是边界，然后是边界。当您为元素设置width时，不包括填充，边框和边距。因此，如果您将某个元素的width设置为100%，然后添加了1px厚的边框，则您的元素实际上会变为100% + 2px（左侧为1px，右侧为1px）。

就您而言，您的尺寸因此变为：30％+ 70％+ 1px + 1px（不要忘记边框！），这会超过100％，并且会导致问题。

如果您设置box-sizing:border-box，您可以改变框模型的大小以使其包含填充和边框的方式。这样，当您设置width时，将会考虑填充和边框。

/* Have all width and height settings include the padding and borders */ 
 
* { box-sizing:border-box; } 
 

 
body { 
 
    margin: 0 auto; 
 
} 
 

 
#headLeft { 
 
    background-color: red; 
 
    height: 50px; 
 
    width: 30%; 
 
    float:left; 
 

 
} 
 

 
#headRight { 
 
    background-color: blue; 
 
    height: 50px; 
 
    width: 70%; 
 
    float:left; 
 
} 
 

 
#logo { 
 
    margin-left: 10px; 
 
    border-width: 1px; 
 
    border-color: red; 
 
    border-style: solid; 
 
}
<body> 
 
    <div id="headLeft"> 
 
    <div id="logo"> 
 
     Here's the logo! 
 
    </div> 
 
    </div> 
 
    <div id="headRight"></div> 
 
</body>

来源

2017-06-01 16:57:14

1

实际的原因你的问题是因为行内元素的默认垂直对齐方式为baseline（因为你可以看到）。要改变这一点，设置为中等或顶部：

body { 
 
    margin: 0 auto; 
 
} 
 

 
#headLeft { 
 
    background-color: red; 
 
    height: 50px; 
 
    width: 30%; 
 
    display: inline-block; 
 
} 
 

 
#headRight { 
 
    background-color: blue; 
 
    height: 50px; 
 
    width: 70%; 
 
    margin-left: -4px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
#logo { 
 
    margin-left: 10px; 
 
    border-width: 1px; 
 
    border-color: red; 
 
    border-style: solid; 
 
}
<body> 
 
    <div id="headLeft"> 
 
    <div id="logo"> 
 
     Here's the logo! 
 
    </div> 
 
    </div> 
 
    <div id="headRight"></div> 
 
</body>

来源

2017-06-01 16:59:26 j08691

0

的在线属性不适用于#headLeft 和#headRight的子元素。

在这种情况下，两个元素都是对齐的，但#logo会搞乱对齐。如果从#headLeft删除#logo，您会注意到这条语句。

为了解决这个问题，你可以：

  • 添加float属性来#logo
  • 添加一个新的div与在#headRight

这里我只是用浮法#logo相同的高度。

body { 
 
    margin: 0 auto; 
 
} 
 

 
#headLeft { 
 
    background-color: red; 
 
    height: 50px; 
 
    width: 30%; 
 
    display: inline-block; 
 
} 
 

 
#headRight { 
 
    background-color: blue; 
 
    height: 50px; 
 
    width: 70%; 
 
    margin-left: -4px; 
 
    display: inline-block; 
 
} 
 

 
#logo { 
 
    margin-left: 10px; 
 
    border-width: 1px; 
 
    border-color: red; 
 
    border-style: solid; 
 
    float: left; 
 
}
<body> 
 
    <div id="headLeft"> 
 
    <div id="logo"> 
 
     Here's the logo! 
 
    </div> 
 
    </div> 
 
    <div id="headRight"></div> 
 
</body>

来源

2017-06-01 17:22:41

相关问题

 相关问题