Question

我无法获得报价（在div内）以正确排队。

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

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

有人能给我一些帮助吗？

Answer 1

我认为您遇到的问题是右侧的引号略低于其他两个DIV。

我看到的一个问题是你的右边div中有一个空的<p>。如果删除它，文本应与剩余的DIV对齐。从您的html中删除：<p></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 -->

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

1 个答案: