div并排的问题答案

【问题标题】：Issue with divs side by sidediv并排的问题
【发布时间】：2016-06-27 17:05:43
【问题描述】：

我在父 div（“header”）中有 4 个 HTML 元素，我正在尝试并排显示子 div。问题是 div“headerTitle”的背景颜色溢出。我如何将背景颜色限制为字体本身？而且，如果您查看快照，左侧的 HTML 元素会被移到线以下（它们与其他元素不对齐。请帮助...

HTML 代码：

<div id="header" >
   <div id="City1">
        Cities
   </div>
   <div id="headerTitle">
      Happy Stores
   </div>
   <div id="City2">
      Cities
   </div>
   <div id="City3">
      Cities
  </div>
</div>

CSS 代码：

#City1
{
    float:left;
}
#headerTitle
{
    float:center;
    background-color:gray;
}
#City2
{
    float:right;
    padding-left: 5px;
    color:orange;
}
#City3
{
    float:right;
    background-color:pink;
}

【问题讨论】：

标签： html css

【解决方案1】：

如何将背景颜色限制为字体本身？

您需要将display:inline; 或display:inline-block 添加到#headerTitle，具体取决于您的要求。

向左的 HTML 元素被移到行的下方

请参阅this answer 以并排放置您的 div：

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

【讨论】：

他在一个 div 上还有一个float: center，这也不正确。查看我的答案以获得更全面的解释。
@s1h4d0w 我在您发表评论之前已经解决了这个问题。
你们帮了大忙 - 让我看看

【解决方案2】：

您在#headerTitle 上使用了float: center;，这不是正确的值。唯一正确的值是无、左、右、初始或继承。浮动不仅仅是对齐元素的一种方式。

你必须重新对齐你的 div，因为如果它在它之后，一个右浮动将被放在一个左浮动下面。所以你必须把#city2 和#city3 放在#city1 之前，在#header 中添加text-align: center，在#headerTitle 中添加display: inline-block。

查看我的 jsFiddle 示例：https://jsfiddle.net/fx3ydcfu/

【讨论】：

没问题，如果其中一个答案有效，请务必标记正确答案！ :)

【解决方案3】：

如果您的问题是关于页面中元素的定位，最好使用

position:absolute;
left: *px;
top: *px;

而不是

float:left;

&我应该这么说：

float:center;

不是浮动属性的可用值。

【讨论】：