自动内联块元素

我有一个inline-block的一些元素，目前正在与自动内联块元素

margin-right: 16%;

我认为拥有这些间隔以百分比间隔之间相等的距离会更容易使网站的响应，但到目前为止它并没有和我似乎有很多不断调整这些百分比的断点。

我想知道的是，如果有一种方法总是将这些元素间隔相等距离，而不使用保证金权限百分比。

我试着使用：

margin-right: auto;

这些元素为好，但似乎没有任何影响。

来源

2016-04-18 Kyle Bing

我建议使用在边缘和百分比像素，如果它的宽度和高度。 – claudios

您可以使用flexbox，并使用justify-content:space-between。

.container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}

<div class="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
</div>

或者，使用CSS表格布局。

.container { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 
.container > div { 
 
    display: table-cell; 
 
} 
 
.container > div:nth-child(1) { text-align: left; } 
 
.container > div:nth-child(2) { text-align: center; } 
 
.container > div:nth-child(3) { text-align: right; }

<div class="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
</div>

或者，使用内嵌块与text-align:justify。请注意，它可能不适用于缩小的HTML。

.container { 
 
    text-align: justify; 
 
} 
 
.container:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
.container > div { 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
</div>

来源

2016-04-18 01:53:54 Stickers

嘿，谢谢你的帮助，flexbox似乎有窍门，但我想知道你是否可能知道可能支持旧版本Internet Explorer的解决方案，现在只有IE 11支持flexbox。如果您不知道后顾之忧 –

带有供应商前缀flexbox在IE 10+上得到支持，一些有用的链接http://caniuse.com/#feat=flexbox和https://autoprefixer.github.io/我还建议一对夫妇的其他解决方案。 – Stickers

如果你需要对旧版浏览器的支持，所以你不希望使用Flexbox，就可以用简单的CSS与百分比。

这里是四个<li>元件，等间隔的一个例子：

*{ 
 
    margin:0; 
 
    padding:0; 
 
    box-sizing:border-box; 
 
} 
 

 
ul { 
 
    list-style-type:none; 
 
    padding:0; 
 
} 
 

 
ul > li{ 
 
    float:left; 
 
    width:20%; 
 
    margin:2.5%; 
 
    /* 100%/4 <li> = 25% --> 20+2.5% margin each side */ 
 
}

<main> 
 
    <ul> 
 
    <li> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore fuga asperiores rerum animi libero tempora aliquid deleniti harum, ullam ea officia est perferendis dicta, et iusto totam alias maxime at!</p> 
 
    </li> 
 
    <li> 
 
     <p>Eum dolore ab, earum quis perferendis quae quidem nulla quia accusamus repudiandae sint et magnam sed, voluptatum enim sapiente quam aliquid, fuga aliquam odio iure sunt animi, minima dolores praesentium.</p> 
 
    </li> 
 
    <li> 
 
     <p>Cupiditate hic incidunt eaque non quasi velit fugit blanditiis, nisi dignissimos reiciendis, possimus nulla? Id esse eius cupiditate sint quod consequuntur neque, unde a, impedit, itaque dignissimos facere cum dolorum.</p> 
 
    </li> 
 
    <li> 
 
     <p>Nisi odit ut, maxime quibusdam error, placeat eaque optio illum consectetur labore deleniti, dolorum molestias inventore nihil. Eius quos, cum quas incidunt cupiditate commodi ullam error dolores porro velit minima!</p> 
 
    </li> 
 
    </ul> 
 
</main>

来源

2016-04-18 13:30:42 fbid

自动内联块元素

回答

相关问题