blocks|key|3285613|text|像这样的东西也许...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3285614|<!DOCTYPE+HTML+PUBLIC+"-//W3C//DTD+HTML+4.01//EN"+"http://www.w3.org/TR/html4/strict.dtd">
<html>
++++<head>
++++++++<style>
++++++++++++#container
++++++++++++{
++++++++++++++++width:600px;
++++++++++++}

++++++++++++#head,+#sub-title
++++++++++++{
++++++++++++++++width:100%25;
++++++++++++}

++++++++++++#sub-left,+#sub-right
++++++++++++{
++++++++++++++++width:50%25;
++++++++++++++++float:left;
++++++++++++}

++++++++</style>
++++</head>

++++<body>
++++++++<div+id="container">
++++++++++++<div+id="head">
+++++++++++++++++#head
++++++++++++</div>
++++++++++++<div+id="sub-title">
++++++++++++++++#sub-title
++++++++++++++++<div+id="sub-left">
++++++++++++++++++++#sub-left
++++++++++++++++</div>

++++++++++++++++<div+id="sub-right">
++++++++++++++++++++#sub-right
++++++++++++++++</div>
++++++++++++</div>
++++++++</div>
++++</body>
</html>|code-block|syntax|javascript|3285615|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Something like this perhaps...</p>

<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;style&gt;
            #container
            {
                width:600px;
            }

            #head, #sub-title
            {
                width:100%;
            }

            #sub-left, #sub-right
            {
                width:50%;
                float:left;
            }

        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;div id="container"&gt;
            &lt;div id="head"&gt;
                 #head
            &lt;/div&gt;
            &lt;div id="sub-title"&gt;
                #sub-title
                &lt;div id="sub-left"&gt;
                    #sub-left
                &lt;/div&gt;

                &lt;div id="sub-right"&gt;
                    #sub-right
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|4130706|text|这应该会实现您想要的结果：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4130707|<html>
++++<head>
++++++++<style+type="text/css">
++++++++++++#header+{
++++++++++++++++text-align:+center;
++++++++++++}
++++++++++++#wrapper+{
++++++++++++++++margin:0+auto;
++++++++++++++++width:600px;
++++++++++++}
++++++++++++#submain+{
++++++++++++++++margin:0+auto;
++++++++++++++++width:600px;
++++++++++++}
++++++++++++#sub-left+{
++++++++++++++++float:left;
++++++++++++++++width:300px;
++++++++++++}
++++++++++++#sub-right+{
++++++++++++++++float:right;
++++++++++++++++width:240px;
++++++++++++++++text-align:+right;
++++++++++++}
++++++++</style>

++++</head>
++++<body>
++++++++<div+id="wrapper">
++++++++++++<div+id="header"><h1>Head</h1></div>
++++++++++++<div+id="sub-main">
++++++++++++++++<div+id="sub-left">
++++++++++++++++++++Right
++++++++++++++++</div>
++++++++++++++++<div+id="sub-right">
++++++++++++++++++++Left
++++++++++++++++</div>
++++++++++++</div>
++++++++</div>
++++</body>
</html>|code-block|syntax|javascript|4130708|您可以使用wrapper类控制整个文档，也可以使用sub-main类仅控制两列。|4130709|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This should do what you are looking for:</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;style type="text/css"&gt;
            #header {
                text-align: center;
            }
            #wrapper {
                margin:0 auto;
                width:600px;
            }
            #submain {
                margin:0 auto;
                width:600px;
            }
            #sub-left {
                float:left;
                width:300px;
            }
            #sub-right {
                float:right;
                width:240px;
                text-align: right;
            }
        &lt;/style&gt;

    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="wrapper"&gt;
            &lt;div id="header"&gt;&lt;h1&gt;Head&lt;/h1&gt;&lt;/div&gt;
            &lt;div id="sub-main"&gt;
                &lt;div id="sub-left"&gt;
                    Right
                &lt;/div&gt;
                &lt;div id="sub-right"&gt;
                    Left
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>And you can control the entire document with the wrapper class, or just the two columns with the sub-main class.</p>


blocks|key|900502|text|您也可以使用CSS+Grids框架来实现这一点，比如YUI+Grids或Blue+Print+CSS。它们解决了许多跨浏览器的问题，并使更复杂的列布局成为可能，仅供普通人使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|900503|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.yahoo.com/yui/grids/|1|http://www.blueprintcss.org/^0|Q|9|0|10|E|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<p>You can also achieve this using a CSS Grids framework, such as <a href="http://developer.yahoo.com/yui/grids/" rel="nofollow noreferrer">YUI Grids</a> or <a href="http://www.blueprintcss.org/" rel="nofollow noreferrer">Blue Print CSS</a>.  They solve alot of the cross browser issues and make more sophisticated column layouts possible for use mere mortals.</p>


blocks|key|4130820|text|当您浮动sub-left和sub-right时，它们不再占用sub-title中的任何空间。您需要添加另一个带有style+=+"clear:+both"的div，以展开包含的div，否则它们将显示在其下方。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4130821|HTML：|4130822|<div+id="sub-title">
+++<div+id="sub-left">
++++++sub-left
+++</div>
+++<div+id="sub-right">
++++++sub-right
+++</div>
+++<div+class="clear-both"></div>
</div>|code-block|syntax|javascript|4130823|CSS：|4130824|#sub-left+{
+++float:+left;
}
#sub-right+{
+++float:+right;
}
.clear-both+{
+++clear:+both;
}|4130825|entityMap^0|4|8|D|9|U|9|1K|L|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|R|$]]

<p>When you float <code>sub-left</code> and <code>sub-right</code> they no longer take up any space within <code>sub-title</code>. You need to add another div with <code>style = "clear: both"</code> beneath them to expand the containing div or they appear below it.</p>

<p>HTML:</p>

<pre><code>&lt;div id="sub-title"&gt;
   &lt;div id="sub-left"&gt;
      sub-left
   &lt;/div&gt;
   &lt;div id="sub-right"&gt;
      sub-right
   &lt;/div&gt;
   &lt;div class="clear-both"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#sub-left {
   float: left;
}
#sub-right {
   float: right;
}
.clear-both {
   clear: both;
}
</code></pre>


blocks|key|900559|text|认真尝试其中的一些，你可以选择固定宽度或更多流畅的布局，这是你的选择！实现起来也很容易。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|900560|IronMyers布局|900561|900562|CSS+Layouts|unordered-list-item|offset|length|900563|Layouts+Customization+Guide|900564|750+Pixel+CSS+Layouts|900565|950+Pixel+CSS+Layouts|900566|100+Percent+CSS+Layouts|900567|900568|越多越多|900569|900570|Layout+Gala+CSS+Layouts|900571|Glish+CSS+Layouts|900572|Code+Sucks+CSS+Layouts|900573|Max+Design+CSS+Layouts|900574|CSS+Play+CSS+Layouts|900575|900576|entityMap|0|LINK|mutability|MUTABLE|url|http://layouts.ironmyers.com/|1|http://layouts.ironmyers.com/customize/|2|http://layouts.ironmyers.com/750_pixel_Layouts/|3|http://layouts.ironmyers.com/950_pixel_Layouts/|4|http://layouts.ironmyers.com/100_percent_Layouts/|5|http://blog.html.it/layoutgala/|6|http://www.glish.com/css/|7|http://www.code-sucks.com/css%2520layouts/|8|http://maxdesign.com.au/presentation/page_layouts/|9|http://www.cssplay.co.uk/layouts/index.html^0|0|0|0|0|B|0|0|0|R|1|0|0|L|2|0|0|L|3|0|0|N|4|0|0|0|0|0|N|5|0|0|H|6|0|0|M|7|0|0|M|8|0|0|K|9|0|0^^$0|@$1|2|3|4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1X|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|1Z|8|@]|9|@$H|20|I|21|1|22]]|A|$]]|$1|J|3|K|5|G|7|23|8|@]|9|@$H|24|I|25|1|26]]|A|$]]|$1|L|3|M|5|G|7|27|8|@]|9|@$H|28|I|29|1|2A]]|A|$]]|$1|N|3|O|5|G|7|2B|8|@]|9|@$H|2C|I|2D|1|2E]]|A|$]]|$1|P|3|Q|5|G|7|2F|8|@]|9|@$H|2G|I|2H|1|2I]]|A|$]]|$1|R|3|-4|5|6|7|2J|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|2K|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|2L|8|@]|9|@]|A|$]]|$1|V|3|W|5|G|7|2M|8|@]|9|@$H|2N|I|2O|1|2P]]|A|$]]|$1|X|3|Y|5|G|7|2Q|8|@]|9|@$H|2R|I|2S|1|2T]]|A|$]]|$1|Z|3|10|5|G|7|2U|8|@]|9|@$H|2V|I|2W|1|2X]]|A|$]]|$1|11|3|12|5|G|7|2Y|8|@]|9|@$H|2Z|I|30|1|31]]|A|$]]|$1|13|3|14|5|G|7|32|8|@]|9|@$H|33|I|34|1|35]]|A|$]]|$1|15|3|-4|5|6|7|36|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|37|8|@]|9|@]|A|$]]]|17|$18|$5|19|1A|1B|A|$1C|1D]]|1E|$5|19|1A|1B|A|$1C|1F]]|1G|$5|19|1A|1B|A|$1C|1H]]|1I|$5|19|1A|1B|A|$1C|1J]]|1K|$5|19|1A|1B|A|$1C|1L]]|1M|$5|19|1A|1B|A|$1C|1N]]|1O|$5|19|1A|1B|A|$1C|1P]]|1Q|$5|19|1A|1B|A|$1C|1R]]|1S|$5|19|1A|1B|A|$1C|1T]]|1U|$5|19|1A|1B|A|$1C|1V]]]]

<p>Seriously try some of these, you can choose fixed width or more fluid layouts, the choice is yours! Really easy to implement too.</p>

<h3>IronMyers Layouts</h3> 

<ul> 
<li><a href="http://layouts.ironmyers.com" rel="nofollow noreferrer">CSS Layouts</a></li> 
<li><a href="http://layouts.ironmyers.com/customize/" rel="nofollow noreferrer">Layouts Customization Guide</a></li> 
<li><a href="http://layouts.ironmyers.com/750_pixel_Layouts/" rel="nofollow noreferrer">750 Pixel CSS Layouts</a></li> 
<li><a href="http://layouts.ironmyers.com/950_pixel_Layouts/" rel="nofollow noreferrer">950 Pixel CSS Layouts</a></li> 
<li><a href="http://layouts.ironmyers.com/100_percent_Layouts/" rel="nofollow noreferrer">100 Percent CSS Layouts</a></li> 
</ul> 

<h3>more more more</h3> 

<ul> 
<li><a href="http://blog.html.it/layoutgala/" rel="nofollow noreferrer">Layout Gala CSS Layouts</a></li> 
<li><a href="http://www.glish.com/css/" rel="nofollow noreferrer">Glish CSS Layouts</a></li> 
<li><a href="http://www.code-sucks.com/css%20layouts/" rel="nofollow noreferrer">Code Sucks CSS Layouts</a></li> 
<li><a href="http://maxdesign.com.au/presentation/page_layouts/" rel="nofollow noreferrer">Max Design CSS Layouts</a></li> 
<li><a href="http://www.cssplay.co.uk/layouts/index.html" rel="nofollow noreferrer">CSS Play CSS Layouts</a></li> 
</ul> 


blocks|key|4130957|text|这个答案添加到上面的解决方案中，以解决你的最后一句话：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4130958|如何确保左下角和右下角留在副标题内|4130959|问题是，随着左下角或右下角的内容扩展，它们将延伸到副标题下。这种行为是在CSS中设计的，但确实会给我们大多数人带来问题。最简单的解决方案是创建一个带有CSS+Clear声明样式的div。|4130960|为此，包含一个CSS语句来定义结束div+(可以清除Left或RIght，而不是同时清除两者，这取决于所使用的浮点声明：|4130961|#sub_close+{clear:both;}|code-block|syntax|javascript|4130962|HTML就变成了：|4130963|<div+id="sub-title">
<div+id="sub-left">Right</div>
<div+id="sub-right">Left</div>
<div+id="sub-close"></div>
</div>|4130964|对不起，我刚刚意识到这是之前发布的，不应该在我回复的时候做那杯咖啡！|4130965|@Darko+Z:你说得对，我找到的overflow:auto+(或overflow:hidden)解决方案的最佳描述是在不久前SitePoint上的一篇文章中，在456bereastreet的一篇文章CSS+Tips+and+Tricks+Part-2中也有很好的描述。我不得不承认自己太懒了，不愿意自己实现这些解决方案，因为关闭div的div工作得很好，尽管它当然非常不优雅。所以从现在开始我会努力整顿我的行为。|offset|length|4130966|entityMap|0|LINK|mutability|MUTABLE|url|http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_2/^0|0|0|0|0|0|0|0|0|2T|Q|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@$U|1D|V|1E|1|1F]]|A|$]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>This answer adds to the solutions above to address your last sentence that reads:</p>

<p><em>how do I ensure that sub-left and sub-right stay within sub-title</em></p>

<p>The problem is that as the content of sub-left or sub-right expands they will extend below sub-title. This behaviour is designed into CSS but does cause problems for most of us. The easiest solution is to have a div that is styled with the CSS Clear declaration.</p>

<p>To do this include a CSS statement to define a closing div (can be Clear Left or RIght rather than both, depending on what Float declarations have been used:</p>

<pre><code>#sub_close {clear:both;}
</code></pre>

<p>And the HTML becomes:</p>

<pre><code>&lt;div id="sub-title"&gt;
&lt;div id="sub-left"&gt;Right&lt;/div&gt;
&lt;div id="sub-right"&gt;Left&lt;/div&gt;
&lt;div id="sub-close"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Sorry, just realized this was posted previously, shouldn't have made that cup of coffee while typing my reply!</p>

<p>@Darko Z: you are right, the best description for the overflow:auto (or overflow:hidden) solution that I have found was in a a post on SitePoint a while ago <a href="http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/" rel="nofollow noreferrer">Simple Clearing of FLoats</a> and there is also a good description in a 456bereastreet article <a href="http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_2/" rel="nofollow noreferrer">CSS Tips and Tricks Part-2</a>. Have to admit to being too lazy to implement these solutions myself, as the closing div cludge works OK although it is of course very inelegant. So will make an effort from now on to clean up my act.</p>


blocks|key|3285871|text|虽然foxy的答案是正确的，但你并不需要那个非语义的、无用的clear:both+div。您需要做的就是将一个overflow:hidden粘贴到容器上：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3285872|#sub-title+{+overflow:hidden;+}|code-block|syntax|javascript|3285873|entityMap^0|U|A|1J|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Its quite a common misconception that you need a <code>clear:both</code> div at the bottom, when you really don't. While foxy's answer is correct, you don't need that non-semantic, useless clearing div. All you need to do is stick an <code>overflow:hidden</code> onto the container:</p>

<pre><code>#sub-title { overflow:hidden; }
</code></pre>


blocks|key|3285928|text|我同意Darko+Z对#副标题应用"overflow:+hidden“的观点。但是，应该指出的是，清除浮点数的overflow:hidden方法不适用于IE6，除非您具有指定的宽度或高度。或者，如果您不想指定宽度或高度，可以使用"zoom:+1"：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3285929|#sub-title+{+overflow:hidden;+zoom:+1;+}|code-block|syntax|javascript|3285930|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I agree with Darko Z on applying "overflow: hidden" to #sub-title. However, it should be mentioned that the overflow:hidden method of clearing floats does not work with IE6 unless you have a specified width or height. Or, if you don't want to specify a width or height, you can use "zoom: 1":</p>

<pre><code>#sub-title { overflow:hidden; zoom: 1; }
</code></pre>


blocks|key|64419|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|64420|<table>
+++<tr>
++++++<td+colspan="2">TITLE</td>
+++</tr>
+++<tr>
++++++<td>subleft</td><td>subright</td>
+++</tr>
</table>|code-block|syntax|javascript|64421|很简单--我花了1分钟才把它打出来。记住CSS文件需要下载到客户端，所以不用担心额外的标签，在这种情况下它是不相关的。|64422|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You do it like this:</p>

<pre><code>&lt;table&gt;
   &lt;tr&gt;
      &lt;td colspan="2"&gt;TITLE&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td&gt;subleft&lt;/td&gt;&lt;td&gt;subright&lt;/td&gt;
   &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>EASY - took me 1 minute to type it.
Remember the CSS file needs to be downloaded to the client, so don't worry about the waffle about extra tags, its irrelavent in this instance.</p>


blocks|key|3285987|text|而不是使用overflow:hidden，这是一种黑客，为什么不简单地设置一个固定的高度，例如height:500px，为父分区？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3285988|entityMap^0|5|F|1B|C|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>Instead of using <code>overflow:hidden</code>, which is a kind of hack, why not simply setting a fixed height, e.g. <code>height:500px</code>, to the parent division?</p>


blocks|key|4131109|text|使用css3的最佳且简单的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4131110|#subtitle{
/*for+webkit+browsers*/
+++++display:-webkit-box;
++++-webkit-box-align:center;
++++-webkit-box-pack:+center;
+++++width:100%25;
}

#subleft,#subright{
+++++width:50%25;
}|code-block|syntax|javascript|4131111|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Best and simple approach with css3</p>

<pre><code>#subtitle{
/*for webkit browsers*/
     display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack: center;
     width:100%;
}

#subleft,#subright{
     width:50%;
}
</code></pre>


blocks|key|3286010|text|#sub-left,+#sub-right
{
++++display:+inline-block;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3286011|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>#sub-left, #sub-right
{
    display: inline-block;
}
</code></pre>


blocks|key|895431|text|通过Bootstrap+Grid，您可以轻松获得跨浏览器兼容的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|895432|<div+class="container">+++++
++<div+class="row">
++++<div+class="col-sm-6"+style="background-color:lavender;">
++++++Div1+++++++
++++</div>
++++<div+class="col-sm-6"+style="background-color:lavenderblush;">
++++++++++Div2
++++</div>
++</div>
</div>|code-block|syntax|javascript|895433|jsfiddle：http://jsfiddle.net/DTcHh/4197/|895434|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/examples/grid/|1|http://jsfiddle.net/DTcHh/4197/^0|2|E|0|0|0|9|V|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<p>Via <a href="http://getbootstrap.com/examples/grid/" rel="nofollow">Bootstrap Grid</a>, you can easily get the cross browser compatible solution. </p>

<pre><code>&lt;div class="container"&gt;     
  &lt;div class="row"&gt;
    &lt;div class="col-sm-6" style="background-color:lavender;"&gt;
      Div1       
    &lt;/div&gt;
    &lt;div class="col-sm-6" style="background-color:lavenderblush;"&gt;
          Div2
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>jsfiddle: <a href="http://jsfiddle.net/DTcHh/4197/" rel="nofollow">http://jsfiddle.net/DTcHh/4197/</a></p>


<p>I haven't played with CSS for too long a time and am without references at the moment. My question should be fairly easy but googling isn't bringing up a sufficient answer. So, adding to the collective knowledge...</p>

<pre><code>|#header---------------------------------------------------------------|
|                               TITLE                                  |
|#sub-title------------------------------------------------------------|
|bread &gt; crumb                    |                  username logout   |
|#sub-left                        |                          #sub-right|
|---------------------------------|------------------------------------|
</code></pre>

<p>That's what I'm wanting my layout to be. The heading anyways. I wanted sub-title to contain sub-left AND sub-right. What css rules do I use to ensure a div is bound by the attributes of another div. In this case, how do I ensure that sub-left and sub-right stay within sub-title?           </p>


How to position two divs horizontally within another div

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我已经很长一段时间没有使用CSS了，目前没有参考资料。我的问题应该是相当简单的，但谷歌搜索并没有给出足够的答案。所以，加上集体的知识...|#header---------------------------------------------------------------||                  ...

问如何在另一个div中水平放置两个div
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在另一个div中水平放置两个divEN