如何将两个div-tag放在一起？

Question

如何将两个div-tag放在一起？我试过这个：

<div>text 1</div><div>text 2</div>

但它们出现在彼此之下，正如我将它们写成两行一样。

Answer 1

Div是块级元素，这意味着除非另有说明，否则它们将占用所有可用空间。为了并排显示它们，您需要使用CSS属性float。

<强> CSS

.float-left{
    float: left;
}

而不是 HTML 只需指定类名：

<div class="float-left"> 1 </div>
<div class="float-left"> 2 </div>

答案 1 :(得分：1)

使用css float：

你需要浮动：左边或右边有一个指定的宽度，div要彼此对齐。

<div style="float:left; width:50%; background:yellow">text 1</div><div style="float:left; width:50%; background:green">text 2</div>

答案 2 :(得分：0)

实际上，你不需要花车来做这么简单的事情。只需将显示类型更改为内联即可为您完成此操作。

在这里看我的笔： http://codepen.io/KempfCreative/pen/oLNqMZ

div { display: inline; } 

就是你需要的一切

答案 3 :(得分：0)

完美的大小调整使用flexbox 将这些div包装在一个父级中 有了这个，内部的div将完全伸展

<div id="parent">
<div>text 1</div><div>text 2</div>
</div>

css

#parent{
display:flex;
flex-wrap:wrap;
width: 100%;
}
#parent div{
flex-grow:1;
}

Answer 2

使用css float：

你需要浮动：左边或右边有一个指定的宽度，div要彼此对齐。

<div style="float:left; width:50%; background:yellow">text 1</div><div style="float:left; width:50%; background:green">text 2</div>

Answer 3

实际上，你不需要花车来做这么简单的事情。只需将显示类型更改为内联即可为您完成此操作。

在这里看我的笔： http://codepen.io/KempfCreative/pen/oLNqMZ

div { display: inline; } 

就是你需要的一切

Answer 4

完美的大小调整使用flexbox 将这些div包装在一个父级中 有了这个，内部的div将完全伸展

<div id="parent">
<div>text 1</div><div>text 2</div>
</div>

css

#parent{
display:flex;
flex-wrap:wrap;
width: 100%;
}
#parent div{
flex-grow:1;
}