blocks|key|356607|text|尝试对.sidebar1使用float:+left，或者重新排序，使侧边栏位于内容之前。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|356608|entityMap^0|3|9|E|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>Try using <code>float: left</code> for your <code>.sidebar1</code>, or reorder your HTML so that the sidebar comes before the content.</p>


blocks|key|138704|text|您的容器中实际上有三个<div>，我不知道这是否是故意的。你应该给你的.content一个width:+80%25;。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|138705|entityMap^0|B|5|Z|8|19|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>You actually have three <code>&lt;div&gt;</code>s inside your container, I don't know if that was intentional. And you should give your <code>.content</code> a <code>width: 80%;</code>.</p>


blocks|key|138726|text|这与元素对于容器来说太宽的事实有关。要么把你的侧边栏放在.content里面，要么调整你的宽度。这里有一个选择：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138727|http://jsfiddle.net/cKMa2/2|offset|length|138728|.sidebar1+{
++++float:+right;
++++width:+20%25;
++++padding-bottom:+10px;
}
.content+{
++++padding:+10px+0;
++++width:+78%25;
++++float:+left;
++++border-left-color:+#FFF;
++++border-right-color:+#FFF;
}
.container+{
++++width:+100%25;
++++margin:+0+auto;
++++overflow:+hidden;
}
.footer+{
++++clear:+both;
}

<div+class="container">
++++<div+class="sidebar1">Some+content+Some+content+Some+content</div>
++++<div+class="content">
+++++++++<h1>Heading</h1>

++++++++<p>Just+some+dummy+text.</p>
++++</div>
++++<div+class="footer">Footer+text</div>
</div>|code-block|syntax|javascript|138729|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|R|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>It has to do with the fact that your elements are too wide for the container. Either put your sidebar inside .content, or adjust your widths. Here's one option:</p>

<p><a href="http://jsfiddle.net/cKMa2/2" rel="nofollow">http://jsfiddle.net/cKMa2/2</a></p>

<pre><code>.sidebar1 {
    float: right;
    width: 20%;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 78%;
    float: left;
    border-left-color: #FFF;
    border-right-color: #FFF;
}
.container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.footer {
    clear: both;
}

&lt;div class="container"&gt;
    &lt;div class="sidebar1"&gt;Some content Some content Some content&lt;/div&gt;
    &lt;div class="content"&gt;
         &lt;h1&gt;Heading&lt;/h1&gt;

        &lt;p&gt;Just some dummy text.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;Footer text&lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|356741|text|内容比父级小10px，因此旁边没有空间放置192px的侧边栏(960px的20%25)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|356742|你可以做更多这样的事情：|356743|​|356744|#container+{
++++width:+450px;
++++margin:+0+auto;
}

#sidebar+{
++++float:+right;
++++width:+200px;
++++background:+#dff;
}

#content+{
++++overflow:+hidden;
++++background:+#fdd;
}|code-block|syntax|javascript|356745|<div+id="container">
++++<div+id="sidebar">
++++++++<p>Pellentesque+habitant+morbi+tristique+senectus+et+netus+et+malesuada+fames+ac+turpis+egestas.+Vestibulum+tortor+quam,+feugiat+vitae,+ultricies+eget.</p>
++++</div>
++++<div+id="content">
++++++++<p>Pellentesque+habitant+morbi+tristique+senectus+et+netus+et+malesuada+fames+ac+turpis+egestas.+Vestibulum+tortor+quam,+feugiat+vitae,+ultricies+eget,+tempor+sit+amet,+ante.</p>
++++</div>
</div>|356746|356747|上面的代码会将侧边栏放在容器的右边，然后content+div会占据容器中剩余的空间。overflow:+hidden告诉div在决定大小时要注意浮动元素，而不是只占用容器的整个宽度。为此，您必须将浮动元素放在overflow:+hidden元素之前。|offset|length|style|CODE|356748|entityMap^0|0|0|0|0|0|0|17|G|2X|G|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|11|8|@$P|12|Q|13|R|S]|$P|14|Q|15|R|S]]|9|@]|A|$]]|$1|T|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|U|$]]

<p>The content is 10px smaller than the parent so there is no room for a 192px sidebar next to it (20% of 960px).</p>

<p>You could do something more like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    width: 450px;
    margin: 0 auto;
}

#sidebar {
    float: right;
    width: 200px;
    background: #dff;
}

#content {
    overflow: hidden;
    background: #fdd;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="sidebar"&gt;
        &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt;
        &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The above code will float the sidebar to the right of the container and then the content div will take up any of the remaining space in the container. The <code>overflow: hidden</code> tells the div to take note of the floated element when deciding on the size instead of just taking up the full width of the container. For this to work you MUST have the floated elements before the <code>overflow: hidden</code> element.</p>


blocks|key|138807|text|问题是你的元素是在一个可调整大小的窗口中浮动的，所以当没有足够的空间时，浮动的元素会转到下一行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138808|有一个简单的解决方案:将浮动元素放在一个宽度固定的容器中，宽度足以容纳所有浮动的框。|138809|我不确定你的屏幕的尺寸，但例如，这可能会起作用：|138810|<div+style="width:+1300px;">
++++(Put+the+floated+boxes+here)
<div>|code-block|syntax|javascript|138811|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>The problem is that your elements are floating in a resizable window, so when there is not enough space the floated elements go to the next line.</p>

<p>There is an easy solution: put the floating elements in a container with a fixed width wide enough to contain all of the floated boxes.</p>

<p>I'm not sure of the dimensions of your screen, but for example, this could work:</p>

<pre><code>&lt;div style="width: 1300px;"&gt;
    (Put the floated boxes here)
&lt;div&gt;
</code></pre>


<p>I have a webpage, and it has two divs inside the container- <code>content</code> and <code>sidebar1</code>. I don't know why, but whenever I place my <code>sidebar1</code> div on the right, after the <code>content</code> div, I land up with my sidebar underneath, not next to it!</p>

<h1>My code:</h1>

<h2>HTML</h2>

<pre><code>&lt;div class="container"&gt;

  &lt;div class="content"&gt;
    &lt;p&gt;&amp;nbsp;&lt;/p&gt;
    &lt;p&gt;&amp;nbsp;&lt;/p&gt;
    &lt;h1&gt;&lt;!-- TemplateBeginEditable name="Heading" --&gt;Heading&lt;!-- TemplateEndEditable --&gt;&lt;/h1&gt;
    &lt;!-- TemplateBeginEditable name="Content" --&gt;Just some
    &lt;!-- end .content --&gt;
    dummy text.&lt;!-- TemplateEndEditable --&gt;&lt;/div&gt;
    &lt;div class="sidebar1"&gt;
    &lt;/div&gt;
  &lt;div class="footer"&gt;
    Footer text&lt;!--end .footer --&gt;&lt;/div&gt;
&lt;!-- end .container --&gt;&lt;/div&gt;
</code></pre>

<h2>CSS</h2>

<pre><code>.sidebar1 {
    float: right;
    width: 20%;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 950px;
    float: left;
    border-left-color: #FFF;
    border-right-color: #FFF;
}
.container {
    width: 960px;
    background-color: #000000;
    margin: 0 auto; 
}
</code></pre>

<p>I'm still very new to HTML, and don't understand my problem. Thanks in advance!</p>


Can't get my sidebar on the right of content?

容器

我有一个网页，它在容器中有两个divs - content和sidebar1。我不知道为什么，但是每当我把我的sidebar1 div放在右边，在content div之后，我的侧边栏在下面，而不是在它旁边！我的代码：HTML<div class="container">  <div class="content"> ...

问无法将我的侧边栏放在内容的右侧？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将我的侧边栏放在内容的右侧？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将我的侧边栏放在内容的右侧？
EN