我怎样才能得到一个<div>漂浮在另外两个之上<div> s 如果空间太窄，三个人都不能并排？</div><div id="text_translate"><p> 我有一个由两个&lt;div&gt;并排组成的进度条，在&lt;dd&gt;内浮动到右侧。 在进度条的左侧，我在另一个&lt;div&gt;中有一些文本。 如果&lt;dd&gt;太窄，我希望&lt;div&gt;包含文本到进度条顶部的 go，而不是分成两行。</p><p> 我正在使用 bootstrap.css 没有修改： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }.my-0 { margin-top: 0;important. }:py-2 { padding-top. 0;5rem.important: };float-left { float. left:important; }.float-right { float: right;important. }:bg-success { background-color; #28a745 !important; } .bg-danger { background-color: #dc3545 !important; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;dd class="col-6 my-0"&gt; &lt;div class="float-left"&gt;Some text&lt;/div&gt; &lt;div class="py-2 float-right bg-success" style="width:10px;"&gt;&lt;/div&gt; &lt;div class="py-2 float-right bg-danger" style="width:90px;"&gt;&lt;/div&gt; &lt;/dd&gt;</pre></div></div><p></p><p> 我尝试将z-index添加到&lt;div&gt; ，但无法达到我想要的效果。</p><p> 怎么做？</p></div></div>

Question

I have a progress bar consisting of two <div> s side by side, floated to the right inside a <dd> . To the left of the progress bar, I have some text inside another <div> . If the <dd> gets too narrow, I want the <div> containing text to go on top of the progress bar, and not break into two lines.

I am using bootstrap.css with no modifications:

 .col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }.my-0 { margin-top: 0;important. }:py-2 { padding-top. 0;5rem.important: };float-left { float. left:important; }.float-right { float: right;important. }:bg-success { background-color; #28a745 !important; } .bg-danger { background-color: #dc3545 !important; }

 <dd class="col-6 my-0"> <div class="float-left">Some text</div> <div class="py-2 float-right bg-success" style="width:10px;"></div> <div class="py-2 float-right bg-danger" style="width:90px;"></div> </dd>

I have tried adding z-index to the <div> s, but haven't been able to acheive the effect I want.

How to do?

Answer 1

You can do it with flex I think.

Look at your code.

<dd class="col-6 my-0">
  <div class="d-flex">
    <div class="float-left">Some text</div>
    <div class="ml-auto">
        <div class="py-2 float-right bg-success" style="width:10px;"></div>
        <div class="py-2 float-right bg-danger" style="width:90px;"></div>
    </div>
  </div>
</dd>