Javascript 需要使用基于百分比的左右DIV设置中间列DIV的精确宽度，并设置高度_Javascript_Jquery_X Editable

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

javascript jquery

Javascript 需要使用基于百分比的左右DIV设置中间列DIV的精确宽度，并设置高度,javascript,jquery,x-editable,Javascript,Jquery,X Editable,我需要一些帮助来设计这个布局的CSS/HTML 整个过程将是一个以屏幕为中心的弹出模式顶部的全宽栏用于显示任务标题左栏用于任务描述，左下角的Div是固定的Div，用于保存“编辑任务描述”按钮中间的DIV是200px的固定宽度，将包含许多任务数据字段右侧列将包含任务活动/注释流。在右下角的下方是一个固定的DIV，用于保存用于创建新注释的注释表单这就是我正在构建的…… 我请求帮助建立我已经建立的结构的原因是因为 “我的任务模式DIV”当前所有3列的宽度均以%为基础一旦我将中间

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

整个过程将是一个以屏幕为中心的弹出模式

顶部的全宽栏用于显示任务标题左栏用于任务描述，左下角的Div是固定的Div，用于保存“编辑任务描述”按钮

中间的DIV是200px的固定宽度，将包含许多任务数据字段

右侧列将包含任务活动/注释流。在右下角的下方是一个固定的DIV，用于保存用于创建新注释的注释表单

这就是我正在构建的……

我请求帮助建立我已经建立的结构的原因是因为

“我的任务模式DIV”当前所有3列的宽度均以%为基础

一旦我将中间列的宽度设置为固定的200px，当我展开浏览器并调整大小时，它就会开始分离显示大间隙的右侧列

CSS宽度：

calc（）

如果浏览器不支持使用jquery的

calc

表达式

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

调整窗口大小时检查包装器div的宽度。如果包装器div的宽度对于所有分辨率都是固定的，那么即使您调整了屏幕的大小，对于所有屏幕也是可以的。在您的情况下，您的包装器div宽度似乎因不同的分辨率而改变。请检查一下。（我想这个问题与响应性布局有关）

上面答案中的CSS可以工作，您可以使用max width=900px；对于宽度为100%的包装器。

您可以使用calc（）以及-moz-calc、-webkit-calc和-o-calc使其工作。对于旧版本，支持firfox、opera和webkit浏览器，因为它们不支持calc（）属性。您可以在此处检查calc（）属性的浏览器支持表-

在这里查一查fiddle中的代码-

HTML

您可能希望使用以下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>


三栏式布局
正文{边距：0；溢出：隐藏}
#W{位置：绝对；宽度：900px}
#X{位置：绝对；高度：600px；溢出：自动；填充：9px；边框：1px实心红色；边距：9px 110px 0 9px；左：0；右：50%}
#Y{位置：绝对；高度：600px；溢出：自动；填充：9px；边框：1px实心红色；边距：9px-100px 0-100px；左：50%；右：50%}
#Z{位置：绝对；高度：600px；溢出：自动；填充：9px；边框：1px实心红色；边距：9px 9px 0 110px；左：50%；右：0}
左内容
中间内容
正确内容

<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>

* {
    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;
}

<!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>