<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

这将是跨浏览器兼容的。如果没有左边边距，如果你的内容比你的边栏长，你就会遇到内容一直跑到左边的问题。

赋予第一个div float: left;和一个固定宽度，并给第二个div宽度:100%;和浮动:左;。这样应该可以了。如果你想把项目放在下面，你需要明确:both;在你想要放在它下面的项目上。

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

这将是跨浏览器兼容的。如果没有左边边距，如果你的内容比你的边栏长，你就会遇到内容一直跑到左边的问题。

如果你没有标记IE6，那么浮动第二个<div>，并给它一个等同于(或者可能比第一个<div>的固定宽度大一点)的边距。

HTML:

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS:

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

空白说明了'rest-of-space' <div>可能包含比'fixed-width' <div>更多的内容。

不要给固定宽度的图片设置背景;如果你需要明显地看到这些不同的“列”，那么使用人造列的技巧。

你可以使用CSS网格来实现这一点，这是为了说明目的的手工版本:

div.container { display: grid; grid-template-columns: 220px 20px auto; grid-template-rows: auto; } div.left { grid-column-start: 1; grid-column-end: 2; grid-row-start: row1-start grid-row-end: 3; background-color: Aqua; } div.right { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end; 1; background-color: Silver; } div.below { grid-column-start: 1; grid-column-end: 4; grid-row-start: 2; grid-row-end; 2; } <div class="container"> <div class="left">Left</div> <div class="right">Right</div> <div class="below">Below</div> </div>

或者更传统的使用浮动和保证金的方法。

我在这个例子中加入了背景色，以帮助显示物体的位置，以及如何处理浮动区域下面的内容。

在现实生活中，不要将你的样式内联，而是将它们提取到样式表中。

div.left { 宽度:200 px; 浮:左; background - color:水; ｝ div.right { margin-left: 220 px; 背景颜色:银色; ｝ div.clear { 明确:; ｝ <div class="left"> left </div> <div class="right"> right </div> < div class = "清晰" > < / div >以下

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

有很多方法可以实现你的要求:

使用CSS float属性:

<div style="width: 100%;溢出:隐藏;" > < span style=" font - family:宋体;浮:左;> Left </div> . < span style=" font - family:宋体;">右</div> < / div >

使用CSS的display属性-它可以用来使div像一个表一样:

<div style="width: 100%;显示:表;" > <div style=" font - family:宋体"> < span style=" font - family:宋体;显示:表格单元;> Left </div> . < span style=" font - family:宋体;">右</div> < / div > < / div >

还有更多的方法，但这两种是最受欢迎的。