流体柱布局与它们之间有固定的像素边距？ [英] Fluid column layout with fixed pixel margins between them?

问题描述

我不想使用JS，只有css解决方案

。

我想要包含div的列每个都是容器宽度的三分之一。我在这里实现了这一点 -

I dont want to use JS for this, only a css solution please.

I want the columns inside of a containing div to fit inside equally i.e each one is a third of the width of the container. I have achieved this here - http://jsfiddle.net/yFxZX/

However, on top of this, I also want 10px margin between the columns, with the first column kissing the left edge of the container, and the right column kissing the right edge of the container. see image below for crude mock up.

As the browser is re-sized or parent container changes width I want the columns to resize accordingly to fill the space but the margins between them to remain fixed at 10px.

Can this be done without JS?

解决方案

Use negative margins:

.container {
  background: green;
  overflow: auto;
}

.inner {
  padding-left: 20px;
}

.box {
  width: 33.3%;
  background: red;
  float: left;
  margin-right: 10px;
}

.first {
  margin-left: -20px;
}

.last {
  width: 33.4%;
  margin-right: 0;
  /*float:right;*/
}

img {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
}

http://jsfiddle.net/yFxZX/2/

这篇关于流体柱布局与它们之间有固定的像素边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！