0

我需要根据页面大小设置 div 的宽度。

我有三列。第一个和第三个是 50px 固定的。我需要设置我的中间那个，这样它就可以占用所有空间。我还没有找到如何在 CSS 中做到这一点。所以我尝试使用 Javascriptwindow.innerWidth并减去这两个 50px。

这是我的 CSS ：

<div class="col1">
    ...
</div>
<div class="col2">
  <div class="col2-1">
    ...
  </div>
<div class="col2-2">
    ...
</div>
</div>

以及对应的Javascript

<script type="text/javascript">
  setStoreInfoWidth = function () {
    $('div.col2-1').css('width', window.innerWidth-100 + 'px')
  };

  setStoreInfoWidth();

  $(window).resize(function () {
    setStoreInfoWidth();
   });
</script>

这是一个代码工作的 JsFiddle：http: //jsfiddle.net/MrYUb/

但是，我无法让它在我的实际网站上运行。

你知道为什么吗？

4

2 回答 2

2

您可以使用负边距来创建 3 列布局：

http://jsfiddle.net/teynon/J2mx7/2/

<div class="container">
    <div class="leftCol">
        Left stuff
    </div>
    <div class="rightCol">
        Right Stuff
    </div>
    <div class="middleCol">
        Middle stuff
    </div>
</div>
<div style="background-color: #0000BB; clear: both;">Test</div>

CSS：

.container {
    width: 100%;
    position: relative;
}

.leftCol {
    float: left;
    margin-right: -50px;
    width: 50px;
    left: 0px;
    min-height: 100px;
    background-color: #FF0000;
}

.rightCol {
    width: 50px;
    margin-left: -50px;
    right: 0px;
    min-height: 50px;
    background-color: #00FF00;
    float: right;
}

.middleCol {
    margin: 0px 55px 0px 55px;
    background-color: #0000FF;
    min-height: 50px;
}
于 2013-06-20T21:55:39.983 回答
0

为什么不使用百分比？如果您有 2 个 div，那么每个 div 将占 50%。

于 2013-06-20T21:39:32.697 回答