1

「初心者」の質問で申し訳ありませんが、それは私を夢中にさせています...

<div id="footer">
        <div id="footer_wrapper">
            <div id="project_wrapper">
                <div class="footer_image_div project 1">
                    <p>Axance</p>
                    <img src="/axance/img/upload/small/1336465127.jpg" class="footer_image" alt="" />
                    <div class="info_div">
                        <a href="/axance/projects/view/3">Lees meer...</a>
                    </div>
                </div>
                <div class="footer_image_div project 2">
                    <p>Axance</p>
                    <img src="/axance/img/upload/small/1336465159.jpg" class="footer_image" alt="" />
                    <div class="info_div">
                        <a href="/axance/projects/view/4">Lees meer...</a>
                    </div>
                </div>
                <div class="footer_image_div project 3">
                    <p>Dit is een test</p>
                    <img src="/axance/img/upload/small/1336481215.png" class="footer_image" alt="" />
                    <div class="info_div">
                        <a href="/axance/projects/view/5">Lees meer...</a>
                    </div>
                </div>
                <div class="footer_image_div project 4">
                    <p>Test project</p>
                    <img src="/axance/img/upload/small/1336564574.jpg" class="footer_image" alt="" />
                    <div class="info_div">
                        <a href="/axance/projects/view/6">Lees meer...</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

そして、これはスタイルシートです:

    #footer_wrapper {
      margin-bottom:auto;
      margin-left:auto;
      margin-right:auto;
      margin-top:auto;
      width:1000px;
    }

#footer_wrapper {
  margin-bottom:auto;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  width:1000px;
}
.project {
  height:220px;
  width:270px;
}
style.css (line 105)
.footer_image_div {
  float:left;
  padding-left:21.66666666666667px;
  padding-right:21.66666666666667px;
}

今私が欲しいのは、4 つの DIVS がすべてproject_wrapper(インライン) にあり、3 つだけが表示され、もう 1 つは div の外に隠されていることです。どうすればこれを管理できますか?

繰り返しになりますが、初心者の質問と長い情報で申し訳ありません。

4

2 に答える 2

1

div の幅 + マージンの合計が 1000px を超え、最後の div を次の行 (div の外側) に強制しています。

.project の幅を次のように変更した場合:

.project {
  height:220px;
  width:200px;
 }

それらはすべて次のように 1 行に収まります: http://jsfiddle.net/v57n3/

または、次のようなクラスを追加して、最初と最後の div のマージンを調整することもできます。または、 .footer_image_div のマージンを減らすことができます

.first{ margin-left:0px;}

また

.last{ margin-right:0px;}

ボックスモデルについて説明します。http://www.w3schools.com/css/css_boxmodel.asp

于 2012-05-09T12:41:04.663 に答える
0

一緒に追加されたすべてのプロジェクト div の幅がコンテナーの幅よりも大きい

于 2012-05-09T12:43:23.863 に答える