Question

在下面的html中，有两个带有“ejector”类的嵌套div。在侧面中，一个弹射器类div是“女性”，而另一个是“男性”。我希望这些单词不会出现在彩色背景上（分别是粉红色和绿色），而是在条形结束后对着白色。在绿色条结束后，“女性”一词应出现在白色背景上（但数字25保留在绿色条上）。为了达到这个目的，我为一个margin-right提供了一个float:right和一个-15的值，希望将它推到嵌套div的边界之外（但保持在同一个边界）这个词出现在白色的backgorund上。它没用。你可以在这个小提琴中看到http://jsfiddle.net/mjmitche/kpPbE/10/

你能告诉我如何实现我想要实现的目标

注意，我还尝试删除嵌套的div，然后将其放在div的旁边，使用float:left所需的背景颜色，但文本显示在所需的彩色背景http://jsfiddle.net/mjmitche/kpPbE/12/

<div class="chart" style="width:800px; margin-left:auto; margin-right:auto">
    <h4 style="width:600px; margin-left:auto; margin-right:auto">Visitors to StackOverflow</h4>

    <div class="pink" style="width: 50px;">25 <div class="ejector">females</div></div>
    <div class="green" style="width: 30px;">15 <div class="ejector">males</div></div>

</div>

CSS

chart div {

        text-align: right;
        padding: 3px;
        margin: 1px;
        color: #000;
        width: 600px;
      }
      .green {
        font: 15px sans-serif;
        background-color: green;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
        height: 20px;
        line-height: 20px;
      }
      .pink  {
        font: 15px sans-serif;
        background-color: #f5c5f2;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
        height: 20px;
        line-height: 20px;
      }

     .ejector{
    float:right;
    margin-right: -15px;

  }

Answer 1

如果你需要的话，试试这个

<div class="chart" style="width:800px; margin-left:auto; margin-right:auto">
<h4 style="width:600px; margin-left:auto; margin-right:auto">Visitors to StackOverflow</h4>

<span class="pink" style="width: 50px;">25 </span ><span>females</span><br>
<span class="green" style="width: 30px;">15 </span><span>males</span>

不需要弹射器类，你的代码中的问题是：

<div class="pink" style="width: 50px;">25 <div class="ejector">females</div></div>

你是在粉红色背景的div内设置女性的div，这意味着粉红色的背景将适用于它。第二个问题是元素是一个块级元素，这意味着粉红色的div将占据整行，下一个元素将在一个新行上，而是使用内联元素的span。

Answer 2

看起来有几个问题。

将颜色的<div>更改为<span>会更好
完全卸下弹射器<div>。
将display: inline-block添加到.pink和.green的css中。这样您就可以<span>宽度。

它无效，因为您在粉红色/绿色<div>的定义宽度范围内包含弹出器<div>。

此外，根据您的需要，您可以在<div>,或<p>中包含每一行。

这是一个小提琴： http://jsfiddle.net/5hwVH/5/

而且，这是更新的html：

<div class="chart" style="width:800px; margin-left:auto; margin-right:auto">
    <h4 style="width:600px; margin-left:auto; margin-right:auto">Visitors to StackOverflow</h4>

    <div>
        <span class="pink" style="width: 50px;">25</span> females
    </div>
    <div>
        <span class="green" style="width: 30px;">15</span> males
    </div>

</div>

而且，CSS

.chart div {

        text-align: right;
        padding: 3px;
        margin: 1px;
        color: #000;
        width: 600px;
      }
      .green, .pink {
        font: 15px sans-serif;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
        height: 20px;
        line-height: 20px;
        display: inline-block;
      }
      .green {
        background-color: green;
      }
      .pink {
        background-color: #f5c5f2;
      }

      }

正如您所看到的，我还结合了.pink和.green的大部分内容。将CSS尽可能地与有意义的地方结合起来是一种很好的做法。它将来会减少维护。

Answer 3

您需要absolute或relative定位，但使用后者会稍微复杂一些。因此，为了简单起见，让我们使用前者。

将容器div（.green和.pink）的CSS设置为position: relative;，以便将其用作绝对定位元素的根。您的.ejector课程的新CSS将如下所示：

div.ejector{
    position: absolute;
    color: black;
    top: 0; /* makes sure the word is at same height as the number */
    left: 100%; /* sets the word 100% of whatever the width from its parent */
    margin-left: 10px; /* any value to space the words from the colored bars */
}

绝对定位存在一个问题：如果您想在div之后添加流量元素，它们将与该内容重叠。因此，我们可以简单地在margin-right和.green上添加.pink divs来计算额外空间，例如。每个弹射器div的大小+ 10px（放一些间距），这里是57px＆amp; 71px。

演示：http://jsfiddle.net/kpPbE/13/

两个div出现在同一条线上

3 个答案: