我有两个div容器。
虽然需要一个特定的宽度,我需要调整,这样,其他div占用了剩余的空间。有什么办法可以做到吗?
- .left {
- float: left;
- width: 83%;
- display: table-cell;
- vertical-align: middle;
- min-height: 50px;
- margin-right: 10px;
- overflow: auto;
- }
- .right {
- float: right;
- width: 16%;
- text-align: right;
- display: table-cell;
- vertical-align: middle;
- min-height: 50px;
- height: 100%;
- overflow: auto;
- }
- <div class="left"></div>
- <div class="right"></div> <!-- needs to be 250px -->
解决方法
参见:
http://jsfiddle.net/SpSjL/(调整浏览器的宽度)
HTML:
- <div class="right"></div>
- <div class="left"></div>
CSS:
- .left {
- overflow: hidden;
- min-height: 50px;
- border: 2px dashed #f0f;
- }
- .right {
- float: right;
- width: 250px;
- min-height: 50px;
- margin-left: 10px;
- border: 2px dashed #00f;
- }
你也可以使用display:table,这通常是一个更好的方法:How can I put an input element on the same line as its label?