如何使用CSS将两个部分元素放在一起?(复制)

This question already has an answer here:

这个问题已经有了答案:

• Expand a div to take the remaining width 19 answers
• 展开一个div以获取剩下的宽度19个答案

I'm trying to implement the following HTML structure using HTML5 and CSS. The section elements have to be next to each other. The right section element must have a margin-left of 30 px and a fixed width of 220 px.

我正在尝试使用HTML5和CSS实现以下HTML结构。部分元素必须相邻。右边的section元素必须具有30 px的左边界和220 px的固定宽度。

What I have so far is as follows:

到目前为止，我所得到的是:

HTML

HTML

<section id="section-left">My left section</section>
<section id="section-right">My right section</section>

CSS

CSS

#section-left {
   float: left;
}

#section-right {
   float: right;
   width: 220px;
   margin-left: 30px
}

My problem is that the left section does not fill the remaining space up to the right section element. My result looks as follows:

我的问题是左边的部分没有填满右边的部分。我的结果如下:

What is the problem here?

这里有什么问题?

1 个解决方案

#1

Reverse the order of your sections and use this CSS:

颠倒各部分的顺序，使用这个CSS:

#section-left {
    overflow:hidden;
}
#section-right {
    width:220px;
    margin-left:30px;
    float:right;
}

jsFiddle example

jsFiddle例子