是否可以使用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属性中执行计算.
我正在努力创建一个适合我的容器区域的整个宽度的文本框.
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
<button type="submit" class="btn btn-lg">Search</button>
</form>
</div>
</div>
当我执行上述操作时,正如我所料,这两个表单元素是内联的,但最多只占用几列.徘徊col-md-12在萤火虫的div上显示它占据了预期的全宽.它只是文本输入似乎没有填补.我甚至尝试添加一个内嵌宽度值,但它没有改变任何东西.我知道这应该很简单,现在感觉真的很蠢.
这是一个小提琴:http://jsfiddle.net/52VtD/4119/embedded/result/
编辑:
选择的答案在各方面都是彻底的,并提供了很好的帮助.这就是我最终使用的东西.但是我认为我的初始问题实际上是Visual Studio 2013中默认MVC5模板的问题.它包含在Site.css中:
input,
select,
textarea {
max-width: 280px;
}
显然这阻止了文本输入的适当扩展......对未来的ASP.NET模板用户的公平警告......
我有两个div容器.
虽然需要一个特定的宽度,我需要调整它,这样,另一个div占用了剩下的空间.有什么方法可以做到这一点吗？
.left {
float: left;
width: 83%;
display: table-cell;
vertical-align: middle;
min-height: 50px;
margin-right: 10px;
overflow: auto;
}
.right {
float: right;
width: 16%;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto;
}<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->我想并排放置两个DIV标签而不使用固定宽度.第一个div扩展到其内容,第二个div应填充剩余空间.div也不能坐在另一个div的顶部,因为它们有一个透明的背景图像,所以如果它们相交就很明显了.我尝试了所有可能的想法,但是找不到使用DIV标签的解决方案.
我可以使用TABLE来做到这一点,但是可以使用DIV吗？或者这是DIV不能做的另一件事吗？
这是代码:
#right{
background: green;
width: 100%;
}
#left {
margin-top: 5px; /* to test if they intersect*/
background: red;
}
#container {
width: 800px;
}
<div id="container">
<div id="left"> This div is as big as it's content</div>
<div id="right"> rest of space</div>
</div>
谢谢你的回复!
我有这个表格......
<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<fieldset>
<legend>Who are you?</legend>
<label for="first-name">First name</label><input type="text" name="first_name" required /><br />
<label for="last-name">Surname</label><input type="text" name="last_name" required /><br />
<label for="email">E-mail</label><input type="email" name="email" required /><br />
<input type="button" name="submit1" id="submit1" value="Next" />
<input type="button" name="clear" id="clear" value="Clear" />
</fieldset>
</form>
有了这个CSS ......
form {
margin: 24px 0 0 0;
}
form legend {
font-size: 1.125em;
font-weight: bold;
}
form fieldset {
margin: 0 0 32px 0;
padding: 8px;
border: 1px solid #ccc;
} …我正在尝试使用100%宽度的流体输入盒,同时将标签浮动到左侧.这是我现在拥有的:
.left {
float: left;
}
input {
width: 100%;
}
<form>
<label class="left">Name:</label>
<input class="left" id="name" name="name"/>
<div class="clear"></div>
</form>
这有效,但它低于标签.如果我使用父div来分配浮点数,那么它不会超过100%.有任何想法吗？
谢谢!
我有一个非常基本的单输入字段,旁边有一个"提交"按钮.搜索按钮的固定宽度为104像素.两者都以浏览器视口总宽度的50%包装在一起.我的计划是在浏览器窗口放大时允许输入字段放大.
目前,对于我的特定浏览器窗口,我必须修改输入字段的宽度,以便从包装器的左侧扩展到提交按钮的左侧.然而,当我调整窗口大小时,它(显然)不会相应地调整,因此留下了白色空隙.
我还没有在其他任何地方找到这个问题的答案.我很清楚,通常100%的宽度和104px的正确填充将解决其他内联元素的这种问题.但是,这里的问题是按钮似乎不能位于填充上方,而是移动到新行.
我怎么解决这个问题？谢谢!
编辑:这是我到目前为止所拥有的.访问jsfiddle.net/nWCT8/整个包装器需要居中,它需要大多数浏览器支持(虽然我不介意IE6不能使用它).出于这个原因,我不认为'calc'是非常合适的.
我试图在CSS中使以下注册盒流体响应.
这是一个例子:http://cssdesk.com/aYLwW
我希望输入字段宽度"灵活"并根据页面缩小.
您可以从示例中看到缩小窗口时,按钮最终会下降到输入字段下方.
考虑到这一点,我应该如何设置我的输入#iiuuu-iiihuu字段宽度,以允许输入字段优雅地调整大小而没有任何颠簸？
非常感谢任何指针:-D