0

3 つの列を持つフッターを作成する必要があります。以下のコードは、最初の画像ではなく 2 番目の画像を提供します。

<footer>
    <div id=”footer_links”&gt; </div>
    <div id=”values”&gt;.....</div>
    <div id=”contacts”&gt;.....</div>
    <div id="copyright">.....</div>
</footer>

CSS コード:

footer{
 height: auto;
 padding:1px 15px 1px 20px;
 clear:both;
 }
#footer_links{
float:left;
}
#values{
 float:none;
 padding:0 600px 0 0;
 text-align:justify;
 }
#contacts{
float: right;

}

#copyright{
float:none;
text-align:center;
}

ここに画像の説明を入力

ここに画像の説明を入力

2 番目の例のように div をオフセットするのではなく、適切に並べるにはどうすればよいですか?

4

4 に答える 4

6

CSS3 Multicolumnsを使用できます。

div#multicolumns {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

プレビューとドキュメントについては、リンクを参照してください。

于 2012-09-17T17:16:00.330 に答える
4

ここにあなたが望むものに似た構造があります..あなたが探しているものがまだ正確にはわかりません. または、質問は実際には何ですか..

HTML

<footer>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div id="meta-links"></div>
</footer>​

CSS

footer {
  width:100%;
  background-color:#CCC;
  min-height:100px;    
}

.column {
  width:30.5%;
  background-color:#333;
  height:100px;
  float:left;
  margin:0 10px;
}

#meta-links {
 width:100%;
 background-color:red;
 float:left;   
 height:20px;
}

フィドル:

http://jsfiddle.net/eYKsm/13/

</p>

あなたの編集に基づく更新：

私が最初にすることは、パディングを変更することです。そして、私が試みる2番目のことは、左の列をフローティングすることです...たとえば....

footer {
 height: auto;
 padding:1px 15px;
 width:520px;
 }
#footer_links{
 float:left;
 width:150px;  
 border:1px solid #CCC;
 padding:10px;
}
#values {
 width:150px;        
 float:left;
 text-align:justify;
 border:1px solid #CCC;
 padding:10px;
 }
#contacts{
float: left;
width:150px; 
border:1px solid #CCC;
padding:10px;
}
#copyright{
float:left;
text-align:center;
border:1px solid #333;
width:514px;
}

また、グリッドを使用するデザイン/UX 原則に従うために、すべての列の幅が等しい (そうあるべきである) 場合は、必ずしも clear both を使用する必要はありません。私の新しいフィドルの例では、固定ピクセル幅を使用しました。ただし、流動的なレイアウトを作成する場合は、内側の幅 (パディングを除く) を計算し、それを 3 で割ることによってパーセンテージを使用できます。フッターに関しては、幅 100% で左にフロートできます。

留意すべきもう 1 つの点は、すべての列の幅とパディングが同じである場合、各コンテナーに ID を使用する必要がないことです。上記の例のように、1 つのクラスを使用できます。

これが私の新しいフィドルです: http://jsfiddle.net/krishollenbeck/Kkr83/1/ </p>

于 2012-09-17T17:12:48.210 に答える
1

clear: both、float:left、およびを使用する必要がありfloat:rightます。

コードは次のとおりです。

為にHTML

<div id = "footer">
    <div id="part1">
        <div id="col1">
            <li>a</li>
            <li>c</li>
            <li>b</li>
        </div>
        <div id="col2">
            <li>a</li>
            <li>c</li>
            <li>b</li>
        </div>
   </div>
   <div id="part2">   
        <li>a</li>
        <li>c</li>
        <li>b</li>
   </div>
</div>

今ここに行きますCSS

#footer {width: 1000px; }
#part1 {
    width: 500px;
    float:left;
    clear: both;
}
#part 2 {
    float:right;
    width: 500px;
}
#col1 {
    width: 200px;
    float: left;
    clear: both;
}

#col2 {
    width: 200px;
    float: right;
}
于 2012-09-17T17:19:35.613 に答える
0

DIV の束ではなく、スタイル付きの順序なしリストを使用する必要があります。意味的に言えば、DIV は何の意味もありません。リストには本質的な意味があります。

<ul>
    <li><a href="...">some text</a></li>
    <li><a href="...">some more text</a></li>
    <li><a href="...">more text</a></li>
</ul>

UL の幅を設定し、複数の列に対してそれらを浮動させることができます。各列に 1 つ。

于 2012-09-17T17:11:44.830 に答える