如何使行内块元素填充行的其余部分? [英] How to make an inline-block element fill the remainder of the line?

查看：24 发布时间：2021/12/24 23:13:12 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"><头></头><身体><table style="width:100%;"><tr><td style="border:1px 纯黑色;width:100px;height:10px;"></td><td style="border:1px solid black;height:10px;"></td></tr>

它生成一个具有固定宽度(不是百分比宽度)的左列，以及一个扩展以填充行上的剩余空间的右列.听起来很简单，对吧?此外，由于没有什么是浮动的"，因此父容器的高度会适当扩展以包含内容的高度.

--开始咆哮--
我已经看到了带有固定宽度侧栏的多栏布局的明确修复"和圣杯"实现，它们很糟糕而且很复杂.他们颠倒元素的顺序，他们使用百分比宽度，或者他们使用浮动、负边距，并且左"、右"和边距"属性之间的关系是复杂的.此外，布局是亚像素敏感的，因此即使添加边框、填充或边距的单个像素也会破坏整个布局，并将整列发送到下一行.例如，即使您尝试做一些简单的事情，例如将 4 个元素放在一行中，每个元素的宽度设置为 25%，舍入错误也是一个问题.
--END RANT--

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

解决方案

参见: http://jsfiddle.net/qx32C/36/

.lineContainer {溢出:隐藏；/* 清除浮动 */边框:1px 实心 #000}.lineContainer div {高度:20px}.剩下 {宽度:100px；向左飘浮;右边框:1px 实心 #000}.对 {溢出:隐藏；背景:#ccc}


<div class="left">left</div><div class="right">right</div>

为什么我将 margin-left: 100px 替换为 .right 上的 overflow: hidden?

Is such a thing possible using CSS and two inline-block (or whatever) DIV tags instead of using a table?

The table version is this (borders added so you can see it):

<!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>

It produces a left column with a FIXED WIDTH (not a percentage width), and a right column that expands to fill THE REMAINING SPACE on the line. Sounds pretty simple, right? Furthermore, since nothing is "floated", the parent container's height properly expands to encompass the height of the content.

--BEGIN RANT--
I've seen the "clear fix" and "holy grail" implementations for multi-column layouts with fixed-width side column, and they suck and they're complicated. They reverse the order of elements, they use percentage widths, or they use floats, negative margins, and the relationship between the "left", "right", and "margin" attributes are complex. Furthermore, the layouts are sub-pixel sensitive so that adding even a single pixel of borders, padding, or margins will break the whole layout, and send entire columns wrapping to the next line. For example, rounding errors are a problem even if you try to do something simple, like put 4 elements on a line, with each one's width set to 25%.
--END RANT--

I've tried using "inline-block" and "white-space:nowrap;", but the problem is I just can't get the 2nd element to fill the remaining space on the line. Setting the width to something like "width:100%-(LeftColumWidth)px" will work in some cases, but performing a calculation in a width property is not really supported.

解决方案

See: 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?

这篇关于如何使行内块元素填充行的其余部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何使行内块元素填充行的其余部分? [英] How to make an inline-block element fill the remainder of the line?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何使行内块元素填充行的其余部分? [英] How to make an inline-block element fill the remainder of the line?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭