Question

我想在内容为width: 100%的div旁边放置一个div。所以标记是：

<div id="left_sidebar" style="float: left; height: 100%; width: 150px;"></div>
<div id="outer_wrapper" style="position: relative; float: left;"></div>

#outer_wrapper中的所有内容都有100％的宽度。不幸的是，它不起作用。

我做了FIDDLE

Answer 1

怎么样：

#left {
    width: 150px;
    height: 1000px;
    background-color: green;
    float: left;
}
#right {
    width: 100%;
    height: 1000px;
    background-color: red;
    float: left;
}

<div id="right">
  content here
    <div id="left"></div>
  more content here
</div>

第二个选项：

删除.right div的宽度和浮动属性，并给它150px左边距：

#left {
    width: 150px;
    height: 1000px;
    background-color: green;
    float: left;
}
#right {
    height: 1000px;
    background-color: red;
    margin-left:150px;
}

<div id="left"></div>
<div id="right"></div>

Answer 2

http://jsfiddle.net/hasecbinusr/cm9qxbt8/2/

$(document).ready( function() {
   var rightWidth = $(window).width - $('#left').width();
   $('#right').width(rightWidth);
});

Answer 3

这个怎么样？

<div style="padding-left:150px; position:relative;width:100%;">
    <div id="outer_wrapper" style="position: relative; width:100%">this is 100%</div>
    <div id="left_sidebar" style="position:absolute;left:0px;top:0px;width:150px;">this is 150 pixels wide</div>
</div>

这个想法是让最外面的div成为150px的左边距，这样第一个子div就会被渲染150px远离边界。然后使用绝对位置添加另一个将成为左容器的div，并强制将其渲染为好像是第一个。

在100％宽度div旁边浮动div

3 个答案: