使用内联块并排显示两个div

Question

我试图与内联块并排显示两个div（不能使用浮点数）。目前我的CSS无法做到这一点。我意识到这可能是重复的，但是在尝试了相关帖子的建议后，我仍然无法让它发挥作用。

＆＃13;

＆＃13;

<div id="wrapper">
  <div id="images">
    TEST Data
  </div>

  <div id="specs">
    Test Data
  </div>
</div>

＆＃13;

articles
category
article_category
view

＆＃13;

＆＃13;

＆＃13;

Answer 1

#wrapper必须+200px宽度

Answer 2

修改#wrapper的css：

#wrapper{
    display:inline-table;
    width: 200px;
}

宽度必须至少为200px，因为您需要两个元素（每个100px）才能修复。

example jsfiddle

Answer 3

问题是你的包装div只有100px宽，所以这两个子项不能并排放置，因为它们也是100px宽。我把它做得更宽，它们现在并排出现：jsfiddle

#wrapper{
    display:inline-block;
    width: 300px;
}
#images {
    display: inline-block;
    width: 100px;
}
#specs {
    display: inline-block;
    width: 100px;
 }

Answer 4

包装器的大小与包含的元素#images和#specs的大小相同，因此请将其宽度：100％或大于200px的大小，这些元素将水平排列。

div {outline: 1px dashed red;}

#wrapper{
    display:inline-block;
    width: 100%;
}
#images {
    display:inline-block;
    width: 100px;
}
#specs {
    display:inline-block;
    width: 100px;
 }

<div id="wrapper">
     <div id="images">
         TEST Data
     </div>

     <div id="specs">
         Test Data
     </div>
</div>