css - 如何将div中的文本向左移动？

Question

我有一个个人网页模板。我想使用左侧 div #content 中的空间，但我无法弄清楚如何在不将侧边栏 div 移动到底部或其他位置的情况下将文本移动到左侧。这是 CSS 代码:

#content {
  float: right;
  width: 605px;
  margin: 0;
  padding-left: 170px;
  border-left: 1px solid #ddd;
}
.sidebar {
  width: 150px;
  padding-left: 1px;
  float: left;
}

我附上了一张图片，您可以在链接中看到它(我仍然没有足够的积分来加载它)。 div 中的文本位于“p”内。

这是内容和侧边栏的 HTML 代码:

    <div id="content">
        <h2>Introduction</h2>
        <p>Welcome to exalted, a free valid CSS &amp; XHTML strict web template from <a href="http://www.spyka.net" title="spyka webmaster">spyka Webmaster</a>. 
            This template is <strong>free</strong> to use permitting a link remains back to  <a href="http://www.spyka.net" title="spyka webmaster">http://www.spyka.net</a>. 
            Should you wish to use this template unbranded you can buy a template license from our website for 5.00 GBP, this will allow you remove all branding related to our site, 
            for more information about this see below.</p>  

        <p>This template has been tested in:</p>
        <ul>
            <li>Firefox 3.5</li>
            <li>Opera 10.00</li>
            <li>IE 7 and 8</li>
            <li>Chrome</li>
        </ul>

        <h3>Buy unbranded</h3>
        <p>Purchasing a template license for 5.00 GBP (at time of writing around 7.40 USD) gives you the right to remove any branding including links, logos and source tags relating to spyka webmaster. Payments are processed using paypal, with which we are a verified member, via the licensing page on our website which can be accessed at <a href="http://www.spyka.net/licensing" title="template license">http://www.spyka.net/licensing</a></p>

        <h3>More free web templates</h3>
        <p>Looking for more free web templates for other projects? Check out our <a href="http://justfreetemplates.com/portfolio?user=spyka">free web template portfolio</a>. We also offer <a href="http://www.spyka.net/wordpress-themes">WordPress themes</a> and <a href="http://www.awesomestyles.com">phpBB3 styles</a>, all of which are released under Open Source or Creative Commons licenses!</p>

        <h3>Webmaster forums</h3>   
        <p>You can get help with editing and using this template, as well as design tips, tricks and advice in our <a href="http://www.spyka.net/forums" title="webmaster forums">webmaster forums</a></p>

    </div>

    <div class="sidebar">
        <ul>    
           <li>
                <h4><span>Navigate</span></h4>
                <ul class="blocklist">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="examples.html">Examples</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Solutions</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </li>

        </ul> 
    </div>

Answer 1

我认为你不需要

padding-left: 170px;

在此Fiddle我将 padding-left 更改为 0，并将 #sidebar div 重新排列在 #content div 上方。并让他们都成为

float: left;

希望对您的问题有所帮助。在我看来，在这里使用 bootstrap 会非常有用，但我不知道您是否可以在您的情况下使用它。