Tri*_*nko 177 css layout fixed-width
是否可以使用CSS和两个内联块(或其他)DIV标签而不是使用表？
表格版本为此(添加了边框以便您可以看到它):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>
它会生成一个左侧列,其中包含固定宽度(不是百分比宽度),右侧列会扩展以填充线上的剩余空间.听起来很简单吧？此外,由于没有任何东西被"浮动",因此父容器的高度适当地扩展以包含内容的高度.
--BEGIN RANT--
我已经看到了具有固定宽度侧柱的多列布局的"清晰修复"和"圣杯"实现,它们很糟糕并且它们很复杂.它们反转元素的顺序,它们使用百分比宽度,或者它们使用浮点数,负边距,并且"左","右"和"边距"属性之间的关系是复杂的.此外,布局是亚像素敏感的,因此即使添加单个边框,填充或边距像素也会破坏整个布局,并将整个列包装发送到下一行.例如,即使你尝试做一些简单的事情,例如将4个元素放在一行上,每个宽度设置为25%,舍入错误也是一个问题.
--END RANT--
我尝试过使用"inline-block"和"white-space:nowrap;",但问题是我无法获得第二个元素来填充线上的剩余空间.将宽度设置为"width:100% - (LeftColumWidth)px"在某些情况下会起作用,但实际上不支持在width属性中执行计算.
thi*_*dot 169
请参阅: http ://jsfiddle.net/qx32C/36/
.lineContainer {
overflow: hidden; /* clear the float */
border: 1px solid #000
}
.lineContainer div {
height: 20px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.right {
overflow: hidden;
background: #ccc
}<div class="lineContainer">
<div class="left">left</div>
<div class="right">right</div>
</div>为什么我更换margin-left: 100px用overflow: hidden的.right？
编辑:这是上面(死)链接的两个镜像:
Pan*_*hti 56
使用flexbox的现代解决方案:
.container {
display: flex;
}
.container > div {
border: 1px solid black;
height: 10px;
}
.left {
width: 100px;
}
.right {
width: 100%;
background-color:#ddd;
}<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>http://jsfiddle.net/m5Xz2/100/
Fro*_*y Z 43
兼容常见的现代浏览器(IE 8+):http://jsfiddle.net/m5Xz2/3/
.lineContainer {
display:table;
border-collapse:collapse;
width:100%;
}
.lineContainer div {
display:table-cell;
border:1px solid black;
height:10px;
}
.left {
width:100px;
} <div class="lineContainer">
<div class="left">left</div>
<div class="right">right</div>
</div>您可以在流体元素上使用 calc (100% - 100px)，同时对两个元素使用 display:inline-block。
请注意，标签之间不应有任何空格，否则您也必须在计算中考虑该空格。
.left{
display:inline-block;
width:100px;
}
.right{
display:inline-block;
width:calc(100% - 100px);
}
<div class=“left”></div><div class=“right”></div>
快速示例：http : //jsfiddle.net/dw689mt4/1/
| 归档时间： |
|
| 查看次数： |
118375 次 |
| 最近记录： |