Html 如何精确地将子div调整为父div

我有一个父div，其中包含3个子div，我尝试将3个div调整为父div的宽度，但在第三个div之后，我有一个小间隙，我如何解决它

HTML

 <div id="main">
      <div id="first" style="width:100%;float:left">
           <div>1</div>
           <div>2</div>
           <div>3</div>
      </div>
 </div>

<div id="main">
    <div id="first">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>

因为你有一个边框，你可能需要减少到32%的宽度来容纳像素。

div{
边界：1px；
框大小：边框框；/*从内部提供填充和边框*/
边框样式：双边框；
}
/*我使用了下面的代码来清除浮动
或者也可以使用清除浮动
*/
#第一,之后,，
#第一：以前{
内容：''；
显示：表格；
明确：两者皆有；
}
div#first>div{
宽度：33.33%；/*将宽度从33%更改为33.33%*/
背景：红色；
浮动：左；
显示：块；
}

1.
2.
3.

您只需简单地使用

HTML

 <div id="main">
      <div id="first" style="width:100%;float:left">
           <div>1</div>
           <div>2</div>
           <div>3</div>
      </div>
 </div>

<div id="main">
    <div id="first">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>

---

flexbox的优点：

最小码；效率很高

它反应灵敏

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

---

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

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

---

---

请注意，所有主要浏览器都支持flexbox。一些最新的浏览器版本，如Safari 8和IE10，需要。要快速添加所需的所有前缀，请在左侧面板中发布CSS：。

像这样？您可能还需要#first>div，您也可以使用decimal。32.5%，等等。在我的例子中，最好使用一种通用的方法来解决这个问题。它看起来很棒！但是我使用的是css3，我使用display获得的所有flex选项是：display:inline flexbox；显示：flexbox，而不是FLEX。但它不起作用。。。不是这样的，我不知道我会不会明白。我的答案是纯CSS3。如果你能进一步解释，也许我可以调整我的答案；若要div#first>div，则不会更改任何内容。。虽然您的演示可以运行，但在我的项目中不起作用。我使用css3 VS 2013，这些是我唯一的“flex”选项，也许我遗漏了一些东西。。

div#first { display: flex; }
div#first > div { flex: 1; }