如何将2 div放在一行中

Question

我有2个div。第一个div包含一个大句子。在这句话的最后，我想说一句话，就是在第二个div中。 但我总是得到下一行。这是我的例子

<div class="container">
        <div class="content1">Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web </div>
        <div class="content2">snippets</div>
</div>

我想得到这个

JsFiddle

Answer 1

请不要将div用作内容。将父容器更改为p标记（<p>），将以下div（在本例中为<div class="content1">和<div class="content2">）更改为span-tags（）。它们默认为display:inline;。

如果它只是没有特殊样式的内容文本，请删除所有标记并将其放在父标记内。

我建议使用以下代码：

<p class="container">
        Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web <span class="content2">snippets</span>
</p>

根据您的屏幕截图，这适合作为更合适的解决方案。如果您因为某些原因无法更改HTML，那么您仍然可以更改CSS。

Answer 2

Div默认为块元素。如果你想要内联元素，你应该（理论上）使用跨度。

例如：

<div class="container">
    <span class="content1">Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web </span >
    <span class="content2">snippets</span >
</div>

现在，如果由于某些原因你无法改变它，你可能不得不将特定div的css'display'属性更改为'inline'，尽管我实际上建议不要这样做。

Answer 3

您必须将display从inline-block更改为inline。

.content1, .content2 {
    display: inline;
}

小提琴：http://jsfiddle.net/4utsx65f/2/

Answer 4

使用

.container div{
     display:inline;
 }

或者使用内联元素，例如跨度而不是div

Answer 5

添加＆＃39;显示：内联块;＆＃39;到CSS中的content1和content2类，或者设置内联值：

<div class="container">
    <div class="content1" style="display:inline-block;'>Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web </div>
    <div class="content2" style="display:inline-block;'>snippets</div>

Answer 6

使用display:inline作为内部div：http://jsfiddle.net/4utsx65f/3/

Answer 7

根据要求，我猜第二个单词片段应该是span。

<div class="container">
<div class="content1">Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web 

片段

检查这个小提琴Fiddle

Answer 8

在您的资产中制作一个Css文件.. 在定义写入时定义一个具有任何名称的类。

    .divOnSameLine{
             display:inline;
             float:left;
     }

确保在您的文档中引用css文件。 然后添加类名

<div class="divleft divOnSameLine">Something</div>
<div class="divright divOnSameLine">Something 2</div>