0

幅が 940px のコンテナー内に 4 つの列を収めようとしています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>
4

2 に答える 2

1

これは、inline-block（のようなinline）要素間のスペースが原因です。この問題を回避するには、2つのオプションがあります。

  1. <li>の 間にHTMLコメントを追加してスペースを削除します

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

  2. <li>との間の スペースを削除します

    <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 に答える