Question

我有两个Div标签
我想让它们并排
右边div固定在宽度200，左边div填充剩余区域，但代码不起作用

这是我的代码

<div style="width: 100%;">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue;position:fixed; "></div>
<div style="float: left; width: 100%; height: 100px; border: 5px dashed red; position: fixed;" ></div>    </div>

Answer 1

您可能不应该float和position:fixed您的元素。内联css也是BAD。这是一个有效的JSFiddle。查看position:absolute;

中的position:relative;

我还添加了box-sizing以使边框进入其容器内。

<强> HTML

<div id="div_cont">
    <div id="div2"></div>
    <div id="div3" ></div>    
</div>

<强> CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}
#div_cont{
    position:relative;
    width:100%;
    height:100px;
    padding-left:200px;
}
#div2{
    border: 5px dashed blue;
    position:absolute;
    top:0;
    left:0;
    width:200px;
    bottom:0;
}
#div3{
    border: 5px dashed red; 
    min-height:100px;
}

Answer 2

你需要在css中使用margin属性看这里我已经更改了你的css中的一些属性

<div style="width: 100%;">
  <div style="float: right; width: 200px; height: 100px; border: 5px dashed blue;position:fixed; "></div>
  <div style="height: 100px; border: 5px dashed red; position: fixed; margin-right:200px;" ></div>
  <div style="clear:both;"></div>
</div>

chk it并度过愉快的一天

Answer 3

<div style="width: 100%;">
  <div style="float: right; min-width: 200px; width:20%; height: 100px; border: 5px dashed blue; "></div>
  <div style="float:left; width:79%;">
    <div style="float: left; width: 100%; height: 100px; border: 5px dashed red;" ></div>
  </div>
</div>

Answer 4

CSS3中的

是可能的。但要小心位置：固定

<div style="width: 100%; height: 100px; border: solid thin green; ">
<div style="float: right; width: 200px; height: 100px; border: 5px dashed blue; "></div>
<div style="float: left;  width: calc(100% - 220px); height: 100px; border: 5px dashed red; ">
</div>

并排Div具有一个固定尺寸和另一个宽度百分比

4 个答案: