1

我正在尝试使用float在容器中组织宽度为40% - 30% - 30%的 div 的水平布局。

在每个 div 中，我想插入纯文本，后跟一个填充其 div 水平其余部分的输入字段。

作为问题的简化再现，只需在 CSS 上使用：

.r {background-color: pink;}
.g {background-color: lightgreen;}
.b {background-color: lightblue;}
.w40 {width: 40%;}
.w30 {width: 30%;}
.w100 {width: 100%;}
.fl {float: left;}
.fr {float: right;}
.cb {clear: both;}

这在 HTML 上：

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <input class="b" value="Bbbbbb" />
</div>
<div class="r w30 fl">
    <div class="g fl">Cccccc:</div>
    <div class="b">Dddddd</div>
</div>
<div class="r w30 fl">
    <div class="g fl">Eeeeee:</div>
    <div class="b">Ffffff</div>
</div>

我怎样才能让Bbbbbb占据其 div 右侧的所有空间，就像Dddddd和Ffffff 一样？

这就是我所期待的： 目标

4

3 回答 3

1

从这个答案：我只是将输入包装在一个样式为overflow: hidden.

CSS：

.r {background-color: pink;}
.g {background-color: lightgreen;}
.b {background-color: lightblue;}
.w40 {width: 40%;}
.w30 {width: 30%;}
.w100 {width: 100%;}
.fl {float: left;}
.filler {overflow: hidden; padding-right: 4px;}

HTML：

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <div class="filler"><input class="b w100" value="Bbbbbb" /></div>
</div>
<div class="r w30 fl">
    <div class="g fl">Cccccc:</div>
    <div class="b">Dddddd</div>
</div>
<div class="r w30 fl">
    <div class="g fl">Eeeeee:</div>
    <div class="b">Ffffff</div>
</div>

就是这个。完美的结果！

于 2013-03-01T01:26:11.780 回答
0

如果没有为输入声明 size 属性，则它的默认大小为 20，但即使该大小在不同浏览器中的呈现方式也不同。

一种解决方案是使用 JQuery 计算您为输入留下的空间，然后动态添加 CSS 以修改输入的宽度。

缺点是输入将首先以默认宽度呈现，然后调整大小，可能导致布局“跳舞”。为此，您可以使用 display: none 隐藏输入并仅在调整大小后显示它。

于 2013-02-28T22:37:54.383 回答
0

在您的标记中，将输入包装在div中 在此处输入图像描述

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <div id="inp"><input class="b" value="Bbbbbb" /></div>
</div>

使用此规则为您的输入设置块显示。100% 的宽度将完成剩下的工作

input {
    display:block;
    width:100%;
}

您仍然必须检查一些有关您的第一个粉红色 div 高度的化妆品（由输入推动）在此处查看 fsFiddle

固定高度差

使用以下规则修改边框和高度属性。

input {
    display:block;
    width :100%; 
    border:none;
    height:18px;

}

Finel小提琴在这里

于 2013-02-28T23:23:01.937 回答