如何把3个元素放在父div的一行中？ [英] How to put 3 elements in one row in a parent div?

问题描述

 < div id =mom>我们已经将3个div元素放在另一个div元素中， 
< div class =baby>< / div> 
< div class =baby>< / div> 
< div class =baby>< / div> 
< / div> 
  

调整浏览器大小以改变父宽度时，会发生以下情况：3个元素靠近在一起 / p>

我无法设置保证金的左右自动分配。

解决方案

你想要一个修复余量，但动态宽度？这需要更多的标记，除非你愿意通过使用flexbox放弃对IE9及以下版本的支持。

问题是，你无法将100％分成百分比和固定值（动态宽度，固定边距）就像那样。 （有些方法使用 calc（） ..但是如果您打算使用calc，您也可以使用flexbox。

注意：子元素的宽度不完全相同，不会有（非flexbox，non-calc）方式来实现这一点。

以下是一个示例（ jsFiddle ），但有一点标记，但IE8和9支持。

HTML：

 < div class =mom> 
< div class =child> 
< div class =childinner> Lorem ipsum dolor。< / div> 
< / div> 
< div class =child> 
< div class =childinner> Amet laborum cupiditate。< / div> 
< / div> 
< div class =小孩> 
< div class =childinner> Ratione maxime et！< / div> 
< / div> 
< / code> 

CSS：



  .mom {
 width：100％; / *尝试将其设置为400px或其他东西* / 
 display：table; 
 border：1px solid＃444444; 
} 
 .child {
 display：table-cell; 
} 
 .childinner {
 margin-left：25px; 
 / *装饰.. * / 
背景颜色：#cccccc; 
 min-height：40px; 
} 
 .child：第一个孩子.childinner {
 margin-left：0; 
} 
  




I have put 3 div elements in another div element like this:

<div id="mom">
<div class="baby"></div>
<div class="baby"></div>
<div class="baby"></div>
</div>

When resize my browser so the parent's width changes, something happens: "3 element near together."

I can not set margin left and right auto.

解决方案

So you want a fix margin but dynamic width? That takes a little more markup, unless you're willing to drop support for IE9 and below by using flexbox.

The thing is, you can't split 100% into percentages and fix values (dynamic width, fix margin) just like that. (there are ways using calc() .. but if you're going to use calc, you could also use flexboxes instead.

Note: The child elements aren't exactly the same width. There won't be a (non-flexbox, non-calc) way to achieve this.

Here's an example (jsFiddle) with a little more markup, but IE8 and 9 support.

HTML:

<div class="mom">
    <div class="child">
        <div class="childinner">Lorem ipsum dolor.</div>
    </div>
    <div class="child">
        <div class="childinner">Amet laborum cupiditate.</div>
    </div>
    <div class="child">
        <div class="childinner">Ratione maxime et!</div>
    </div>
</div>

CSS:

.mom {
    width: 100%; /* Try setting this to 400px or something */
    display: table;
    border: 1px solid #444444;
}
.child {
    display: table-cell;
}
.childinner {
    margin-left: 25px;
    /* Decorative .. */
    background-color: #cccccc;
    min-height: 40px;
}
.child:first-child .childinner {
    margin-left: 0;
}

这篇关于如何把3个元素放在父div的一行中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！