将2个div并排放置 [英] Put 2 div side by side
本文介绍了将2个div并排放置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有下面的代码有3行div，问题是我试图将红色水果和绿色水果 div并排放置间距非常感谢任何帮助。
我尝试了什么：
这是我的JSFiddle [ ^ ]
I have this code below that has 3 lines of divs the problem is that i'm trying to put the Red Fruits and Green Fruits divs side by side with spacing in between but nothing seems to work any help would be greatly appreciated.
What I have tried:
Here is my JSFiddle[^]
推荐答案
要并排获得两个div，可以将它们放在左边/右浮动div：
To get two divs side by side, you can put them in left/right floating divs:
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
</head>
<body>
<div>
<div style="float:left;width:calc(50% - 5px);">
<h3 class="class center">Red Fruits</h3>
<div id="redid" class="redclass wrappingflexbox"></div>
</div>
<div style="float:right;width:calc(50% - 5px)">
<h3 class="class center">Green Fruits</h3>
<div id="greenid" class="greenclass wrappingflexbox"></div>
</div>
</div>
<div style="clear:both">
<h3 class="center class">Suggested Fruits</h3>
<div id="randomid" class="randomclass wrappingflexbox top"></div>
</div>
</body>
</html>
凭借你的中心风格，水果都会在一条线上，这可能不是你想要什么。你可能想要包装它们：
With your center style, the fruits would all be on one line, which is probably not what you want. You'd probably want to wrap them:
.wrappingflexbox {
display: flex;
flex-wrap: wrap;
justify-content: left;
}
这篇关于将2个div并排放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
