两个div相邻，但第一个div到第二行 [英] Two div's next to each other but first div going to second line

问题描述

我有一个场景，我有两个div。我想第二个div立即跟随第一个。目前，我必须使用的空间很小，所以第一个div中的文本对于一行来说太大了，并且它包装到第二行。事件发生这种情况，我希望第二个div在第一行之后直接来到（在这种情况下，在第二行的第一个div结束后）。

 < div id =onestyle =display：inline-block;> 
< div id =twostyle =float：left;& < / div> 
< div id =threestyle =float：left;>< / div> 
< / div> 
  

这样工作正常，当文本是div与二的id很小，但是当它是大包装到第二行和div

<$> p $ p> < div id =twostyle =float：left;>< / div>
< div id =three style =float：left ;>< / div>


至

$ b b

 < div id =twostyle =float：left;>< / div> 
< div id =three> < / div> 
  

注意：您不需要将div都左移

I have a scenario where I have two divs. I would like the second div to immediately follow the first. Currently, the space I have to work with is small, so the text in the first div is too large for one line and it wraps to a second line. Event hough this occurs, I would like that second div to come directly after the first (and in this case after the end of the first div on the second line.

<div id="one" style="display: inline-block;">
  <div id="two" style="float: left;"></div>
  <div id="three" style="float: left;"></div>
</div>

This works fine when the text is div with the id of two is small but when it is large it wraps to a second line and the div with the id of three goes below div two.

解决方案

Change your

<div id="two" style="float: left;"></div>
<div id="three style="float: left;"></div>

To

<div id="two" style="float: left;"></div>
<div id="three"></div>

NOTE: You no need to float both the div to left

这篇关于两个div相邻，但第一个div到第二行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！