1

大きな黒い div 内で2 つの div (#aboutと)を中央に配置しようとしています。#testimonial-snippetsこれどうやってするの？

JS フィドル: http://jsfiddle.net/DgtqM/

HTML

<footer>
        <div id="footer-section">
            <section id="about">
                <a href="http://twitter.com" target="_blank"><img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44"></a>
                <p>Lorem ipsum dolor sit amet. Find him on <a href="http://twitter.com" target="_blank">Twitter</a> and <a href="http://instagram.com" target="_blank">Instagram</a>. <a id="slide-toggle" href="#">Contact</a> | <a href="">Archive</a></p>
            </section>
            <section id="testimonial-snippets">
                <a href="http://twitter.com" target="_blank"><img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44"></a>
                <div class="snippet">
                    <p>This is a testimonial.</p>
                    <a class="read-testimonial" href="/testimonials">read more</a>
                </div>
            </section>
        </div>
</footer>

CSS

footer {
background: #222;
clear: both;
color: #f4f3f1;
float: left;
padding: 50px 0;
width: 100%;
}
#footer-section {
margin: 0 auto;
overflow: hidden;
position: relative;
width: 940px;
}
footer section {
float: left;
width: 300px;
}
#about {
margin-right: 20px;
}
footer a {
border-bottom: 1px dotted #f4f3f1;
color: #f4f3f1;
}
.profile-photo {
border: 1px solid #f4f3f1;
float: left;
margin: 4px 10px 10px 0;
}
p {
margin: 0 0 1em;
}
4

2 に答える 2

3

その問題を最小限のマークアップに減らすことができました。それ以外はすべて質問に関係なく、理解を難しくするだけです。

<footer>
    <section id="about">About</section>
    <section id="testimonial-snippets">Testimonial</section>
</footer>

解決策の 1 つは、これらのセクションinline-block要素を作成し、フッターの中央に配置することです。

footer {
    background: #222;
    padding: 50px 0;
    width: 100%;
    text-align: center;
}
footer section {
    width: 300px;
    height: 50px;
    display: inline-block;
    text-align: left;
}
/* Just coloring the different divs */
#about { background: red; }
#testimonial-snippets { background: green; }

http://jsfiddle.net/DgtqM/6/

于 2013-04-22T09:36:27.070 に答える
0

要素を新しい div 内にラップします。次に、新しい div に固定幅を指定しmargin: 0px auto、スタイリングに使用します。

HTML

<div id="footer-section">
   <div class="wrap">
    <section id="about">
      <!--Content -->
    </section>
    <section id="testimonial-snippets">
      <!--Content-->
    </section>
   </div>
</div>

CSS

.wrap{
    width: 620px;
    margin: 0px auto;
    overflow: auto;
}

例 http://jsfiddle.net/DgtqM/5/

于 2013-04-22T09:33:00.560 に答える