需要设置中间列 DIV 精确宽度，基于百分比的左右 DIVs 并设置高度

Question

我需要一些帮助来设计此布局的 CSS/HTML....

整个事情将是一个以屏幕为中心的弹出窗口。

顶部全宽条用于任务标题左栏用于任务描述，左下角的 Div 是一个固定的 DIV，用于容纳编辑任务描述按钮。

中间DIV固定宽度200px，会包含很多Task数据字段。

右列将包含任务 Activity/Comment 流。在它的右下角下面是一个固定的 DIV，它将包含用于创建新评论的评论表单

http://i.imgur.com/Vq5Ad66.png

这就是我正在构建的....

我寻求帮助来构建我已经构建的结构的原因是...

我的任务模式 DIV 当前所有 3 列都有一个基于百分比的宽度...

一旦我将中间列设置为固定 200 像素宽，它就会开始分隔我的怀特列，当我展开浏览器并调整大小时显示出很大的间隙....

Answer 1

CSS宽度：calc()

.wrapper{
   width: 100%;
}
.column-a, .column-c{
   width: calc(50% - 100px);
}
.column-b{
  width: 200px;
}

如果浏览器不支持使用 jquery

的 calc 表达式

$('.column-a, .column-c').css('width', '50%').css('width', '-=100px');

Answer 2

在调整 window 大小时检查包装纸 div 的宽度。如果 wrapper div 的宽度对于所有分辨率都是固定的，那么即使您调整屏幕大小，它也适用于所有屏幕。在您的情况下，您的包装 div 宽度似乎正在针对不同的分辨率而变化。请检查一下。（我猜这个问题与响应式布局有关）

上面答案写的CSS可以，可以用max-width=900px；对于 width=100% 的包装纸。

Answer 3

您可以通过使用 calc() 以及 -moz-calc、-webkit-calc 和 -o-calc 来使其工作，因为它们不支持 calc( ) 属性。您可以在此处查看浏览器对 calc() 属性的支持 table - http://caniuse.com/#feat=calc

并在此处检查 fiddle 中的代码 - https://jsfiddle.net/zmbupv6v/1/

HTML

<html>
  <body>
    <div class='container'>
      <div class='row'>
        <div class='col1 cols'></div>
        <div class='col2 cols'></div>
        <div class='col3 cols'></div>
      </div>
    </div>
  </body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}


html, body {
    height: 100%;
    width: 100%;
}


.container {
    height: 100%;
    margin: 0 auto;
    max-width: 900px;
    width: 98%;
}


.row {
    height: 100%;
    width: 100%;
}


.cols {
    float: left;    
    height: 100%;
    overflow: scroll;
}

.col1, .col3 {
    width: calc(50% - 100px);
    width: -moz-calc(50% - 100px);
    width: -webkit-calc(50% - 100px);
    width: -o-calc(50% - 100px);
}

.col2 {
    background-color: #000;
    width: 200px;
}

Answer 4

您可能希望使用下面的 3 列布局，它具有固定宽度的中间列和等宽的灵活左右列。

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Three column layout</title>
<style>
body { margin: 0; overflow: hidden }
#W { position: absolute; width: 900px }
#X { position: absolute; height: 600px; overflow: auto; padding: 9px; border: 1px solid red; margin: 9px 110px 0 9px; left: 0; right: 50% }
#Y { position: absolute; height: 600px; overflow: auto; padding: 9px; border: 1px solid red; margin: 9px -100px 0 -100px; left: 50%; right: 50% }
#Z { position: absolute; height: 600px; overflow: auto; padding: 9px; border: 1px solid red; margin: 9px 9px 0 110px; left: 50%; right: 0 }
</style>
<div id=W>
<div id=X>
Left content
</div>
<div id=Y>
Middle content
</div>
<div id=Z>
Right content
</div>
</div>

需要设置中间列 DIV 精确宽度，基于百分比的左右 DIVs 并设置高度

Need to set a middle column DIV exact width with percent based right and left DIVs and set height

javascript

jquery

x-editable