gpt4 book ai didi

css - 如何使行内 block 元素填充行的剩余部分?

转载 作者:数据小太阳 更新时间:2023-10-29 09:05:35 25 4
gpt4 key购买 nike

是否可以使用 CSS 和两个内联 block (或其他)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>

它会生成一个具有FIXED WIDTH(不是百分比宽度)的左列,以及一个扩展以填充该行的THE REMAINING SPACE 的右列。听起来很简单,对吧?此外,由于没有任何内容“ float ”,因此父容器的高度会适当扩展以包含内容的高度。

--开始咆哮--
我已经看到了具有固定宽度侧列的多列布局的“明确修复”和“ chalice ”实现,它们很糟糕而且很复杂。它们颠倒了元素的顺序,它们使用百分比宽度,或者它们使用 float 、负边距,并且“左”、“右”和“边距”属性之间的关系很复杂。此外,布局对子像素敏感,因此即使添加单个像素的边框、填充或边距也会破坏整个布局,并将整个列换行到下一行。例如,即使您尝试做一些简单的事情(例如将 4 个元素排成一行,每个元素的宽度设置为 25%),舍入误差也是一个问题。
--结束咆哮--

我试过使用“inline-block”和“white-space:nowrap;”,但问题是我无法让第二个元素填充剩余空间线。将宽度设置为类似“width:100%-(LeftColumWidth)px”的值在某些情况下会起作用,但实际上并不支持在宽度属性中执行计算。

最佳答案

参见: 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>


Why did I replace margin-left: 100px with overflow: hidden on .right?

关于css - 如何使行内 block 元素填充行的剩余部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5540485/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com