Fixed margins on a responsive layout?

问题

Simply put, I am working on a responsive web layout with columns and rows. Each column width is set relevant to a predefined total width:

column width / total width = width %

and the height is fixed.

Now the problem is, I want the content width to be fluid but the margin and padding to be of fixed width as below.

The code looks something like this:

HTML

<body>
   <div id="left">Left</div>
   <div id="middle">Middle</div>
   <div id="right">Right</div>
</body>

CSS

div {
   float: left;
   padding: 0.5em;
   box-sizing: border-box;
   width: 33.3333333333333%; height 5em; line-height: 5em; text-align: center;
}    

#left {
   background-color: red;
}

#middle {
   background-color: green;
}

#right {
   background-color: blue;
}

http://jsfiddle.net/langoon/Zxn8E/2/

I have thought of some solutions but none of them seem to do what I am looking for :

Set 'box-sizing' to 'margin-box'. Not supported in most browsers.
Instead of margins, use borders. I might want that border and style it differently later.
Nest each box in an outer 'div'. I prefer to keep the number of elements for the DOM to process at a minimum.
Set negative margins as suggested here Fluid column layout with fixed pixel margins between them?. Seems to require an wrapping 'div' for each row and that might pose problems for me.
JavaScript. No thanks.

Am I trying to have my cake and eat it at the same time or is there a way to do this without the drawbacks?

回答1:

With :before / :after

I had fun with :before and :after pseudos, covering half of each gutter with a rectangle: http://jsfiddle.net/PhilippeVay/Zxn8E/11/ (note where the ending tags are, to prevent any whitespace between inline-block elements)

Compatibility: IE8+ as IE7 and lesser don't understand these pseudos.

With Flexible Box Layout Module

This CSS3 module will let you have equal width columns with gutter inside and none outside, exactly what you want to achieve. No fiddle as the syntax changed twice in a few months, I still haven't looked at the new one.
Compatibility on caniuse.com (no IE9-, no Opera)

回答2:

I think the best way to solve this is using a negative margin and the box-sizing property. A quick example:

HTML:

<ul>
    <li><div class="red">Red</div></li>
    <li><div class="green">Green</div></li>
    <li><div class="blue">Blue</div></li>
</ul>

CSS:

ul
{
    list-style: none;
    margin: 0 0 0 -15px; /* Note the negative margin */
    padding: 0;
    overflow: hidden;
}

li
{
    float: left;
    width: 33.3333%;
    padding: 0 0 25px 15px;
    box-sizing: border-box;
}

/* Some decorations */
div { padding: 25px 0; color: white; text-align: center; }
div.red { background: red; }
div.green { background: green; }
div.blue { background: blue; }

Result:

Live Demo

If you want to see this in action, I've created a Fiddle.

回答3:

Try the border route:

http://jsfiddle.net/Zxn8E/3/

div {
    float: left;
    box-sizing: border-box;

    border-top:0.5em solid cyan;
    border-bottom:0.5em solid cyan;
    border-left:0.5em solid cyan;

    width: 33.3333333%; height 5em; line-height: 5em; text-align: center;
}    

div.last{ border-right:0.5em solid cyan; } 


<body>
  <div id="left">Left</div>
  <div id="middle">Middle</div>
  <div id="right" class="last">Right</div>
</body>

来源：https://stackoverflow.com/questions/12041560/fixed-margins-on-a-responsive-layout

标签

html

css

responsive-design