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内的文本位于＆＃34; p＆＃34;。

中

image of the template

这是内容和侧边栏的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非常有用，但我不知道你是否被允许在你的情况下使用它。

Answer 2

如果要在div中将文本对齐到左侧，可以使用text-align: left。尽管如此，默认情况下文本会向左对齐。

根据您的具体情况，您可能会发现flexbox很有用。

添加父容器（main）后，您需要的唯一CSS如下：

main {
  display: flex;
}

#content {
  border-left: 1px solid #ddd;
  flex: 1;
}

我还将.sidebar和#content元素的顺序切换为不向后。

以下是演示http://codepen.io/JKudla/pen/yMxXYZ?editors=1100

Answer 3

我认为这解决了这个问题：

#content {
float: right;
width: 710px;
margin: 0px;
padding-left: 15px;
border-left: 1px solid #ddd;
}

.sidebar {
    width: 200px;
    padding-left: 1px;
    float: left;

}

solved

感谢凯文的帮助。

如何在div内向左移动文本？

3 个答案: