Html CSS：如何在主div中并排放置子div

我有一个主div，主div有多个子div。我无法一个接一个地定位子div

我想每个div应该有相同的高度和相同的背景颜色。前两个div应该有

float:left

，最后一个div应该有

float:right

。我这样做了，但仍然没有得到正确的输出

下面是一个小代码片段

记录50项中的1/5








6



加载。。。。。

我的css代码非常庞大，这就是为什么我不在这里粘贴它，而是在这里提供我的js fiddle链接。所以任何人都可以看到我得到了什么样的奇怪输出。寻找建议和修正的代码样本。谢谢

编辑 输出类似于图像。

---

您可以使用CSS实现此布局

这里有一个通用的解决方案：

HTML

<div id="content">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

---

flexbox的优点：

最小码；效率很高

它反应灵敏

与浮动和表格不同，浮动和表格提供有限的布局容量，因为它们从未用于构建布局，flexbox是一种具有广泛选项的现代（CSS3）技术

---

要了解有关flexbox的更多信息，请访问：

• ~MDN
• ~CSS技巧
• ~YouTube视频教程

---

分配子div的宽度，以便每个子div都可以获得适当的空间。 这可能行得通

#content > div{width:30% !important; 
/* If you have three divs and you equally distribute their width */
float:left;
}
#content:nth-child(1){
width:20%;
float:left;
}
#content:nth-child(2){
width:60%;
float:left;
}
#content:nth-child(3){
width:20%;
float:left;
}

---

在你的小提琴中，你有太多的风格适合你的李和a。然而，我不会批评你的代码风格，而是展示你需要做什么来解决你的问题。如果您相应地更改了以下样式，则应该具有所需的输出

#loader
{
float:left;
width:20%;
}
#pager { 
 float: left;
 width: 60%;
}
#recinfo
{
  float:left;
  width:20%;
}

.paginate {
 display: block;
 font-size: 1.2em;
 width: 100%;
}

你是说像这样

html，
身体，
分区，
跨度
小程序，
对象
iframe，
h1，
h2，
h3，
h4，
h5，
h6，
P
块引用，
之前，
A.
缩写，
缩略语
地址:，
大的
引用，
代码，
德尔，
dfn，
相对长度单位，
img，
ins，
kbd，
Q
s
桑普，
小的
罢工
坚强的
附属的，
啜饮，
tt，
var，
B
U
我
居中
dl，
dt，
dd，
ol,，
ul，
锂，
字段集，
形式，
标签，
传奇
桌子
说明文字
t身体，
特富特，
thead，
tr，
th，
运输署，
文章
在一边
帆布，
细节，
嵌入
图形
figcaption，
页脚，
标题，
hgroup，
菜单，
导航，
产出，
红宝石，
第节，
总结，
时间
做记号
音频
录像带{
保证金：0；
填充：0；
边界：0；
字体：继承；
字体大小：100%；
垂直对齐：基线；
}
html{
线高：1；
}
ol,，
保险商实验室{
列表样式：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}
说明文字
th，
运输署{
文本对齐：左对齐；
字体大小：正常；
垂直对齐：中间对齐；
}
Q
大宗报价{
报价：无；
}
问:以前,，
问:之后,，
blockquote：之前，
blockquote：之后{
内容：“；
内容：无；
}
img{
边界：无；
}
文章
在一边
细节，
figcaption，
图形
页脚，
标题，
hgroup，
主要的，
菜单，
导航，
第节，
总结{
显示：块；
}
*,
*：之后，
*：之前{
框大小：边框框；
}
html，
身体{
身高：100%；
}
#内容{
背景：#fff无重复滚动0；
盒影：0 1px2p0 rgba（0,0,0,0.1）；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：62.5%；
线高：1；
}
#内容>分区{
高度：50px；
}
#装载机{
浮动：对；
宽度：150px；
}
#recinfo{
浮动：左；
宽度：150px；
}
#传呼机{
文本对齐：居中；
}
包扎{
显示：内联块；
字体大小：1.2米；
背景：373943无重复滚动0；
边界半径：3px；
字号：1.4em；
填充：9px 8px；
}
ul.paginate>li{
字体大小：粗体；
显示：内联块；
}
ul.paginate>li>a{
右边距：6px；
}

记录50项中的1/5
加载。。。。。















6

我知道这真的很晚了，但我想我应该发布我是如何设法解决这个问题的

<div>
<h1 class="class1">Example text</h1>
<h1 class="class1">Example text</h1>
<h1 class="class1">Example text</h1>
<h1 class="class1">Example text</h1>
</div>

---

希望这能帮助那些无意中发现这一点的人。
我觉得这很好，你的意思是你希望这些div总是在一条线上（没有包装）？我希望3个小div应该在主div的同一条线上。所有的小div也应该有相同的高度。这个呢？请让我知道是否可以，这样我就可以解释我做了什么。如果你发布了一张图片，那么我可以帮助你发布一张示例图片。看看我得到了什么样的输出。一切都搞砸了。如果可能的话，看看我的JSFIDLE，再给我一个修正后的JSFIDLE链接。我粘贴了你的css，但运气不好。你在js提琴中的css文件链接在哪里？我使用的所有css都在提琴演示中。在您的演示中，有大量CSS代码，而且有点复杂。如果你想简化你的代码，并且只包含与问题相关的必要布局组件，我很乐意回顾一下。你在fiddle演示中提到的flex文件url在哪里？它不是一个库或插件。这是普通代码。我用更多的细节修改了我的答案。recinfo和loader…所有3个子div不在同一行。他们的顶部和高度应该是一样的。你能给我一个正确代码的js小提琴链接吗。谢谢

#loader
{
float:left;
width:20%;
}
#pager { 
 float: left;
 width: 60%;
}
#recinfo
{
  float:left;
  width:20%;
}

.paginate {
 display: block;
 font-size: 1.2em;
 width: 100%;
}

<div>
<h1 class="class1">Example text</h1>
<h1 class="class1">Example text</h1>
<h1 class="class1">Example text</h1>
<h1 class="class1">Example text</h1>
</div>

.class1 {
display: inline-block;
}