Как точно настроить дочерние divs родительскому div

Question

У меня есть отец-дед, который содержит 3 дочерних divs, я пытаюсь настроить 3 divs на ширину отца, но у меня есть небольшой промежуток после третьего div, как я могу его решить ?

HTML

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

CSS

div { 
    border: 1px; 
    border-style: double; 
} 

div#first> div{ 
    width:33%; 
    float:left; 
    display:block; 
} 

Answer 1

div { 
 
    border: 1px; 
 
    box-sizing: border-box; /* which give padding and border from inside */ 
 
    border-style: double; 
 
} 
 

 
/* i have used below code to clear the floats 
 
    or you can also use <div class="clear"></div> to clear the floats 
 
*/ 
 

 
#first:after, 
 
#first:before { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
div#first > div { 
 
    width: 33.33%; /* changed the width from 33% to 33.33% */ 
 
    background: red; 
 
    float: left; 
 
    display: block; 
 
}

<div id="main"> 
 
    <div id="first"> <!-- no need to add because i have cleared the floats and also by default div is a block element it will take 100% --> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    </div> 
 
</div>

Answer 2

div:last-child{ 
    margin:0px !important; 
    padding: 0px !important; 
} 

Потому что у вас есть границы вам, возможно, придется сократить до ширины 32% для размещения пикселей.

Answer 3

Вы можете достичь этого макета очень просто с flexbox.

HTML

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

CSS

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

DEMO

---

Преимущества Flexbox:

1. минимальный код; очень эффективного
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. это отзывчивый
6. в отличии от поплавков и таблиц, которые предлагают ограниченные возможности компоновки, потому что они никогда не были предназначены для построения раскладок, Flexbox современный (CSS3) метод с широкий спектр вариантов.

---

Чтобы узнать больше о Flexbox визита:

• Methods for Aligning Flex Items
• Using CSS flexible boxes ~ MDN
• A Complete Guide to Flexbox ~ CSS-Tricks
• What the Flexbox?! ~ YouTube видео учебник

---

Обратите внимание, что flexbox поддерживается всеми основными браузерами, except IE 8 & 9. Некоторые недавние версии браузера, такие как Safari 8 и IE10, требуют vendor prefixes.Чтобы быстро добавить все префиксы, которые вам нужны, разместите свой CSS на левой панели здесь: Autoprefixer.