Question

我正在尝试在宽度为940px http://jsfiddle.net/thiswolf/D3Z6g/的容器内放置四列但是列不完全适合。每列有220px，右边距为20px，所以理想情况下如果我删除它们应该很合适最后一列的右边距，但即使在那之后，它们也不合适。最后一列缩短了12px。

我的浏览器是firefox 12

这是html

<!Doctype html>
<head>
<meta charset="uft-8">
<title>Four Columns Portfolio</title>
<style type="text/css">

.container{
width:940px;
border:1px dotted red;
height:auto;
}
li.portfolio{
display:inline-block;
width:220px;
height:180px;
background-color:orange;
margin-right:20px;
margin-bottom:10px;
}
li.every-forth{
background-color:orange;
width:208px !important;
margin-right:0;
}
.portfolio-div{
display:block;
margin-left:-40px;
}
</style>
</head>
<body>
   <div class="container">
   <div class="portfolio-div">
         <ul>
         <li class="portfolio">
         <p>Column 1</p>
         </li>
         <li class="portfolio">
         <p>Column 2</p>
         </li>
         <li class="portfolio">
         <p>Column 3</p>
         </li>
         <li class="every-forth portfolio">
         <p>Column 4</p>
         </li>
         </ul>  
    </div>
   </div>
</body>
</html>

Answer 1

这是因为inline-block（如inline）元素之间的空格。要避免此问题，您有两个选择：

通过在<li>

之间添加HTML注释来删除空间

<li class="portfolio">
    <p>Column 1</p>
</li><!--
--><li class="portfolio">
    <p>Column 2</p>
</li>

删除<li> s

之间的空格

<li class="portfolio">
    <p>Column 1</p>
</li><li class="portfolio">
    <p>Column 2</p>
</li>

但是因为它是<li>，they don't need to be closed，所以你可以这样做：

<li class="portfolio">
    <p>Column 1</p>
<li class="portfolio">
    <p>Column 2</p>

我前几次做了一点fiddle，这可以帮助你理解我在说什么。

Answer 2

我终于使用像这样的了

<!Doctype html>
<head>
<meta charset="uft-8">
<title>Four Equal Columns</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0;
    height:100%;
}

.container {
    display:-moz-box;
    display:-webkit-box;
    display:box;
    -moz-box-orient:horizontal;
    -webkit-box-orient:horizontal;
    box-orient:horizontal;
    width:940px;
    margin-left:3%;
    border:1px dotted red;
}

.column {
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
    width:220px;
    margin-right:20px;
    background-color:#ddd;
}

.column p {
    background-color:orange;
    height:auto;
}
.every-forth{
margin-right:0;
}
</style>
</head>
<body>
    <div class="container">
    <div class="column">
        <p>Column 1"</p>
    </div>
    <div class="column">
        <p>Column 2</p>
    </div>
    <div class="column">
        <p>Column 3</p>
    </div>
     <div class="column every-forth">
        <p>Column 4</p>
    </div>
</div>
</body>
</html>

这是一个小提琴http://jsfiddle.net/thiswolf/YNf9N/

在940像素内安装四列

2 个答案: