简体   繁体   English

CSS中的动态和固定大小

[英]dynamic and fixed size in CSS

I need in the same HTML row to have 2 divs: one will stay the same width while the other's size will be increased once the web page is being increased by the end user. 我需要在同一个HTML行中有2个div:一个将保持相同的宽度,而另一个的大小将在最终用户增加网页后增加。

So I defined one div and inside 2 divs like this: 所以我在这里定义了一个div和2个div:

<div>
    <div style="float:left" width="20px">first div</div>
    <div style="float:left" width="100%">first div</div>
</div>

However it does not work! 但它不起作用!

How can I create 2 divs in the same line that one will be fixed size and the other one relative? 如何在同一行创建2个div,其中一个是固定大小而另一个是相对的?

Do I win? 我赢吗?

Live Demo 现场演示

Live Demo #2 (using classes and with support for more than one instance of this) 现场演示#2 (使用类并支持多个实例)

HTML: HTML:

<div id="divHolder">
    <div id="div1">1</div>
    <div id="div2">2</div>
</div>

CSS: CSS:

#divHolder {
    overflow: auto
}
#div1 {
    float: left;
    width: 20px;
    background: #ccc
}
#div2 {
    margin-left: 20px;
    background: #888
}

Take a look at this: http://jsfiddle.net/Shaz/GaZYt/2/ 看看这个: http//jsfiddle.net/Shaz/GaZYt/2/

The left box will change size depending how much horizontal space is left. 左侧框将根据剩余的水平空间来改变大小。 The right box will always have a minimum and maximum width of 200px. 右侧框的最小和最大宽度始终为200px。

Try setting display:inline on the div elements. 尝试在div元素上设置display:inline。 The default display value for a div is block (which causes them to appear on seperate lines). div的默认显示值是block(导致它们出现在单独的行上)。 Here is an example on js fiddle 这是一个关于js小提琴的例子

I believe you may need to use Javascript to handle this case. 我相信你可能需要使用Javascript来处理这种情况。

$(window).resize(function() {
  var $left = $('#left');
  var $container = $('#container');
  $right.width($container - $left);
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM