如何使用CSS将两个截面元素放在一起?

时间:2014-07-25 20:37:47

标签: css html5

我正在尝试使用HTML5和CSS实现以下HTML结构。 section元素必须彼此相邻。右section元素必须具有30像素的margin-left和220像素的固定width

enter image description here

到目前为止我所拥有的内容如下:

HTML

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

CSS

#section-left {
   float: left;
}

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

我的问题是左侧section未填充右侧section元素的剩余空间。我的结果如下:

enter image description here

这里有什么问题?

1 个答案:

答案 0 :(得分:4)

颠倒部分的顺序并使用此CSS:

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

<强> jsFiddle example