1

Webページのコーディングで、HTMLとCSSの組み合わせで問題が発生しました。現在フッターにあるものと同じ既存の3列レイアウトを作成したいと思います。HTML / CSSをコピー/貼り付けしてフッターに名前を変更すると、コードが列として機能しません。最初の3列のレイアウトと同じように機能する2番目の3列のレイアウトをフッターに追加するにはどうすればよいですか？

ここに問題のhtml/CSSがあります

<div id="columns">

<div class="left column">
    <p>left column</p>
</div>

<div class="middle column">
    <p>middle column.</p>
</div>    

<div class="right column">
   <p>right column.</p>
</div>
</div>

<div class="footer">
  <!-- 3 column layout would be placed inside the footer -->


 #columns {
width: 960px;
padding-top: 50px;
margin-bottom: 0px;
}


#columns .column {
    position: relative;
    width: 300px;
    padding: 1%;
    border: solid 1px #000;
}

#columns .left {
    float: left;
}

#columns .middle {
    float: left;
}
#columns .right {
    float: right;
    #container #col1 {
    width: 320px;
    float: left;

 }
4

1 に答える 1

0

私はすべてを残して浮かせ、フッターと列が互いに隣り合って座るのに十分な幅を持っていることを確認しました、そしてそれはあなたが望むことをしているように見えます：

#columns {
padding-top: 50px;
margin-bottom: 0px;
width:1200px;
}
.column {
position: relative;
width: 300px;
padding: 1%;
border: solid 1px #000;
}
.column{float:left;}
.footer{width:1200px;}

</ p>

http://jsfiddle.net/trG5B/

于 2012-10-30T01:02:02.690 に答える