0

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

我的浏览器是 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>
4

2 回答 2

1

inline-block这是因为（like inline）元素之间的空间。为避免此问题，您有 2 个选项：

  1. <li>通过在s 之间添加 HTML 注释来删除空格

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

  2. 去掉<li>s 之间的空格

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

但因为它是<li>，它们不需要关闭，所以你可以这样做：

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

前段时间我做了一个小小提琴，可以帮助你理解我在说什么。

于 2012-07-12T12:02:11.703 回答
0

我终于让它像这样使用html5工作了

<!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/

于 2012-07-12T13:19:03.073 回答