html - 在单行填充空间中显示两个 div - CSS

标签 html css

我有两个 div divadivb。它们的高度固定为 30px。我想在一行中显示它们,一个接一个。这可以通过分别为它们指定 10%90% 的宽度以及 float: left 来完成。这很好用。但是我给了它们一个 1 px 的边框,这会扰乱计算。我将第二个 div 的宽度设置为 88% 并且可以正常工作。但是那个div之后有一个空白区域。

我希望两个 div 都显示在一行中。页面重新调整大小,我希望 div 填充空间,这样我就不能给它们固定宽度。第一个 div 可能会被赋予一个固定的宽度,因为我只想让它 150 px 宽。但是第二个 div 必须更宽才能填充空间。

我得到的是这个;

Current layout

我想要这个:

Expected layout

Here 是 fiddle 。

最佳答案

在正文中添加一个 width: 100% 并在 div1 上指定 float: left; 并删除 float: left; 在div2.

如果您在子元素上使用百分比宽度或高度,您还必须在父元素或容器元素上指定百分比宽度或高度。

应该可以解决! :)

See this fiddle here

祝你好运!

关于html - 在单行填充空间中显示两个 div - CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10191228/

相关文章:

html - 为什么这段代码中图像下方有空格?

javascript - 获取输入元素焦点上的插入符号位置

html - Firefox 是一种与 Chrome 不同的 IE 显示 CSS 代码

html - 如何使 RadioButtonList 在表格单元格中居中

css - 使用 css 变量继承字体系列不起作用

javascript - HTML 禁用文本区域但仍可调整大小

css - 重用 jQuery Mobile CSS 规则

c# - 将 HTML 文件读入内存中的字符串变量

php - JavaScript文本区域字符计数器插入选项卡

javascript - hide() 和 click() 方法 jquery