html - 如何沿容器顶部和底部的水平线对齐 div

Question

我无法正确排列引号(在 div 内)。

这个网站在这里 http://79.170.44.107/robinsonhambro.com/wp/ .

我需要做的是沿着图片顶部和底部的水平线排列 div(具有英雄的类或 id)。出于某种原因，他们似乎坐得并不均匀。

谁能帮帮我？

Answer 1

我假设您遇到的问题是右侧的引号比其他两个 DIV 略低。

我看到的一个问题是您的右侧 div 中有一个空的 <p>。如果删除它，文本应与其余 DIV 对齐。从您的 html 中删除它:<p><!-- Right div hero section --></p>

此外，您的 .entry 类中有大量填充，删除它应该会使所有内容更接近。

我还建议删除其他 <p> 标签并使用边距以更好地控制元素。

这是我对您的 html 的更新。 这是通过浏览器进行的。

更新的 Style.CSS

.entry {
  border-bottom-color:#F1F1F1;
  border-bottom-style:solid;
  border-bottom-width:1px;
  padding:50px 50px 45px 0;

变成....

.entry {
  border-bottom-color:#F1F1F1;
  border-bottom-style:solid;
  border-bottom-width:1px;
  padding:0 50px 45px 0;

更新的 html

<div id="herobox">

    <div id="left-hero">
                    <img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2015/02/newdoor.jpg" width="265px" height="426px" alt="Robinson Hambro Door">
                </div>

    <div id="centre-hero">
    <h1>
    <p class="pcentre">Robinson Hambro specialises in Board Search and Chairman Advisory. The Firm advises companies with a global outlook drawing on the experience of a multilingual and multidisciplinary team.</p>
    </h1>
    <div class="subcentrehero">
    <p class="p03">Robinson Hambro Chairman Advisory Service is priceless.Լ/p>
    <p class="p04">- Carles Casajuana, former Spanish Ambassador to the UK</p>
    </div>
    <div class="subcentrehero">
    <p class="p03">Robinson Hambro advice was invaluable and I could not recommend them more highly!</p>
    <p class="p04">- Global COO of a $45bn firm</p>
    </div>
    </div>

    <div id="right-hero">
    <p class="p01">The process was carried out to a high standard, in a timely way, and I can therefore wholeheartedly recommend this service.</p>
    <p class="p02">- Dr Andrew McCulloch, CEO, MHF</p>
    <p class="p01">Karina knows everyone</p>
    <p class="p02">Fiona Woolf, former Lord Mayor of the City of London</p>
    <p class="p01">We would have no hesitation in highly recommending Robinson Hambro for an assignment in any sector.</p>
    <p class="p02">- Robin Walker, Deputy Chairman, Berry Gardens</p>
    </div>
    </div>
    <div style="clear:both"></div>
                        </article> <!-- end .entry -->
                </div> <!-- end #main_content -->
    </div> <!-- end #content_area -->

                </div> <!-- end .container -->
            </div> <!-- end #main-area -->
        </div> <!-- end #page-wrap -->

        <footer id="main-footer">
            <div class="container clearfix">
                <div id="footer-top-shadow"></div>

                                <div id="footer-widgets" class="clearfix">
                        <div class="footer-widget footer-col1"><div id="text-4" class="f_widget widget_text"><h4 class="widgettitle">INSIDER VIEW</h4>          <div class="textwidget">Visit <a href="http://79.170.44.107/robinsonhambro.com/wp/category/all/">Karina's Column</a> for insights on the world of finance by Robinson Hambro's Karina Robinson
    </div>
            </div></div> <!-- end . footer-widget --><div class="footer-widget footer-col2"><div id="text-5" class="f_widget widget_text"><h4 class="widgettitle">What We Do</h4>           <div class="textwidget"><a href="http://79.170.44.107/robinsonhambro.com/wp/guiding-principles/">Guiding Principles</a>
    <br/>
    <a href="http://79.170.44.107/robinsonhambro.com/wp/chairman-advisory/">Chairman Counsel</a>
    <br/>
    <a href="http://79.170.44.107/robinsonhambro.com/wp/board-search/">Board Search</a></div>
            </div></div> <!-- end . footer-widget --><div class="footer-widget footer-col3"><div id="text-6" class="f_widget widget_text"><h4 class="widgettitle">Get in touch</h4>         <div class="textwidget">t: +44 (0) 20 3405 2355
    <br/> 
    m: +44 (0) 7980 510 975
    <br/>
    <a href="http://79.170.44.107/robinsonhambro.com/wp/contact-us/">e: info@robinsonhambro.com</a>
    </div>
            </div></div> <!-- end . footer-widget --><div class="footer-widget footer-col4 last"><div id="text-3" class="f_widget widget_text"><h4 class="widgettitle">LINKS</h4>           <div class="textwidget"><a href="http://www.citywomen.co.uk/" target="_blank"><img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/women.gif"></a> 

    <a href="http://insideglobalbanking.com/" target="_blank"><img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/bankers.gif"></a> 

    <a href="https://www.youtube.com/channel/UCre_nrMpCa86oIaGgW4TTfA" target="_blank"><img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/youtube.png"></a> 

    <a href="https://plus.google.com/u/0/110294568454146566422/about" target="blank"><img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/googleplus.png"></a> </div>
            </div></div> <!-- end . footer-widget -->               </div> <!-- end #footer-widgets -->

                <p id="copyright">Designed by  <a href="http://www.elegantthemes.com" title="Premium WordPress Themes">Elegant Themes</a> | Powered by  <a href="http://www.wordpress.org">WordPress</a></p>
            </div> <!-- end .container -->
        </footer> <!-- end #main-footer -->