Question

当第二个div中的文本字符串更长时，有人能够告诉我为什么这个JSFiddle中的div（导入的Bootstrap CSS）不是并排的吗？感谢您抽出宝贵时间帮助我。

<div class="container">
    <div class="row">
        <div class='col-md-12'>
          <div style='display:inline-block;border:1px solid purple;'>
            whatever
          </div>
          <div style='display:inline-block;border:1px solid red;'>
          Why the heck do the divs stack on top of each other when this line gets really long?  I would think they would be side by side because the display property of the div is set to inline block
          </div>
        </div>
    </div>
</div>

Answer 1

您可以设置内联块的宽度。 https://jsfiddle.net/DTcHh/13604/

<div style='display:inline-block; width: 20%; border:1px solid purple;'>
whatever
</div>
<div style='display:inline-block; width: 70%;border:1px solid red;'>
Why the heck do the divs stack on top of each other when this line gets really long?  I would think they would be side by side because the display property of the div is set to inline block
</div>

我建议使用引导网格，而不是像上面那样定义内联块。例如，<div class="col-md-3>等https://getbootstrap.com/examples/grid/

Answer 2

Flexbox实际上为我服务，谢谢你的帮助。

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.flexcontainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
   flex-direction: row;
}

  <div class="container">
        <div class="flexcontainer">
              <div style='width: 50px; border:1px solid purple;'>
                whatever
              </div>
              <div style=' border:1px solid red;'>
              Why the heck do the divs stack on top of each other when this line gets really long?  I would think they would be side by side because the display property of the div is set to inline block
              </div>
            </div>
        </div>
    </div>

Answer 3

也许，这是因为inline-block。请尝试使用inline：

＆＃13;

<div class="container">
    <div class="row">
        <div class='col-md-12'>
          <div style='display:inline;border:1px solid purple;'>
            whatever
          </div>
          <div style='display:inline;border:1px solid red;'>
          Why the heck do the divs stack on top of each other when this line gets really long?  I would think they would be side by side because the display property of the div is set to inline block
          </div>
        </div>
    </div>
</div>

＆＃13;

引导并排DIV

3 个答案: