当第一个div在两行中时，如何将两个div放在一起？

Question

我要求将两个div放在一起（第二个div从第一个结束开始）。我在stackoverflow上找到了相关问题，但没有找到答案。

<div id="wrapper">
    <div id="div1">The two divs are,when first line goes to second then, second div is not appearing </div>
    <div id="div2">next to each other.</div>
</div>
#div1 {
   float:left;
    display: inline-block;

}
#div2 {
    float:left;
    display: inline-block;
}

以下是我尝试的fiddler示例...

要求是，如果第一个div以第二行结束第一个字，那么第二个div应该从第二个第二个字开始。

Answer 1

只需添加到css中的div -

width: 50%;

<强>更新

在float:left;的{​​{1}}末尾也缺少分号。在那里添加分号。

Answer 2

只需在两个 div 元素上设置display: inline-block;，它们就会彼此相邻。在你的小提琴中，你在第一个float: left之后缺少一个分号，这会破坏你的样式表的其余部分。通过省略 div 上的float: left属性，它们之间会有一个空格。这是两个示例，一个没有float: left，另一个有：

没有float: left

＆＃13;

＆＃13;

#div1 {
  display: inline-block;
}
#div2 {
  display: inline-block;
}

＆＃13;

<div id="wrapper">
  <div id="div1">The two divs are,when first line goes to second then, second div is not appearing</div>
  <div id="div2">next to each other.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用float: left

＆＃13;

＆＃13;

#div1 {
  float: left;
  display: inline-block;
}
#div2 {
  float: left;
  display: inline-block;
}

＆＃13;

<div id="wrapper">
  <div id="div1">The two divs are,when first line goes to second then, second div is not appearing</div>
  <div id="div2">next to each other.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

而不是div尝试使用span看看它是否适合你..

<span>some text some text some text some text some textsome text some text some text vsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text</span>
<span>next line text</span>

Answer 4

你需要内联阻止吗？ 添加了背景颜色以显示div框

<强> HTML

<div id="wrapper">
    <div id="div1">
        The two divs are,when first line goes to second then, second div is not appearing
    </div>
    <div id="div2">
        next to each other.
    </div>
</div>

<强> CSS

#div1 {
    float:left;
    //display: inline-block;
    background: red;
}
#div2 {
    float:left;
    //display: inline-block;
    background: blue
}

http://jsfiddle.net/nrzey328/3/