7

我一直在尝试让两个 div 并排浮动（即 sliderdiv 和 main-search），但似乎无法得到它。`同样的小提琴：http: //jsfiddle.net/Ar99F/1/

加价

<div id="homecontent" class="container">
    <div id="homecontent-mid" class="row rounded">
        <div id="homebanner" class="rounded">
            <div class="sliderdiv">Content Goes Here</div>
            <div class="main-search">Search Content Goes Here</div>
        </div>
    </div>
</div>

CSS

#homecontent {
    background: url("images/content-bg.png") repeat-x scroll 0 0 #FAFAFA;
    position: relative;
}

#homecontent-mid {
    background: url("images/bg-stage.png") repeat-y scroll right top #FFFFFF;
    border: 1px solid #BDBCBD;
    min-height: 100%;
    outline: medium none;
    top: -40px;
}

#homebanner {
    background: url("images/bg-stage-shade.png") repeat-x scroll 0 0 transparent;
    padding-right: 20px;
    position: relative;
}

.rounded {
    border-radius: 10px 10px 10px 10px;
}

.sliderdiv {
    background: none repeat scroll 0 0 red;
    float: right;
}

.main-search {
    background: none repeat scroll 0 0 #FFFFFF;
    border: medium solid #D51386;
    clear: both;
    float: left;
    overflow: hidden;
    padding: 20px 10px;
}

请帮忙

4

3 回答 3

17

看看这里。只需将float: left它们都放入并删除clear: both.

于 2013-08-30T11:35:43.737 回答
2

添加overflow:hidden到您的包装器以完成设计并删除clear:both;，您需要将float:left第一项放入而不是两者

更新的小提琴

于 2013-08-30T11:44:20.413 回答
0

像这样

演示

CSS

#homecontent {
    background: url("images/content-bg.png") repeat-x scroll 0 0 #FAFAFA;
    position: relative;
}
#homecontent-mid {
    background: url("images/bg-stage.png") repeat-y scroll right top #FFFFFF;
    border: 1px solid #BDBCBD;
    min-height: 100%;
    outline: medium none;
    top: -40px; 
    display:table;
}
#homebanner {
    background: url("images/bg-stage-shade.png") repeat-x scroll 0 0 transparent;
    padding-right: 20px;
    position: relative;

}
.rounded {
    border-radius: 10px 10px 10px 10px;
}
.sliderdiv {
    background: none repeat scroll 0 0 red;

    display:table-cell;
}
.main-search {
    background: none repeat scroll 0 0 #FFFFFF;
    border: medium solid #D51386;
    clear: both;
    display:table-cell;
    overflow: hidden;
    padding: 20px 10px;
}
于 2013-08-30T11:40:13.020 回答