相关疑难解决方法(0)
如何使内联块元素填充该行的其余部分？
是否可以使用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填充剩余的宽度
如何让div填满剩余的宽度？
例如
<div id="Main" style="width: 500px;">
<div id="div1" style="width: 100px;"></div>
<div id="div2"></div>
<div id="div3" style="width: 100px; float: right;"></div>
</div>
如何让div2填补其余部分？
推荐指数
解决办法
查看次数
CSS块格式化上下文如何工作？
CSS块格式化上下文如何工作？
CSS2.1规范说,在块格式化上下文中,框从顶部开始垂直排列.即使路径中存在浮动元素,也会发生这种情况,除非块框建立了新的块格式化上下文.我们知道,当浏览器在块格式化上下文中渲染块框时,浮动元素被省略,为什么建立新的块格式化上下文有效？
盒子(块盒和内联盒)如何在正常流程中布局？
我在某处看到块元素生成块框,但当用户代理绘制框并在填写内容时将其考虑在内时,将忽略浮动元素.虽然浮动元素将与框的其他元素边界重叠,但解决方案是使用重叠元素为重叠元素建立新的块格式化上下文overflow:hidden.
"新的块格式化上下文仍然是块格式化",因此在绘制框时,它还会将浮动元素视为不退出.这是对的还是我误解了"新的块格式化上下文？"
更新:更多问题
通过说"这是对柱状样式布局有用的行为.然而,它的主要用途是停止浮动,例如在"主要内容"div中,实际上清除浮动的侧列,即在源代码中出现的浮动."
我不明白其中的含义,我会提供一个例子,也许你会理解我.
.content {
background: #eee;
color #000;
border: 3px solid #444;
width: 500px;
height: 200px;
}
.float {
background: rgba(0, 0, 255, 0.5);
border: 1px solid #00f;
width: 150px;
height: 150px;
float: right;
}
p {
background: #444;
color: #fff;
}<div class="content">
<h3>This is a content box</h3>
<p>It contains a left floated box, you can see the actual content div does go under the float, but that it is …推荐指数
解决办法
查看次数
CSS Float:将图像浮动到文本的左侧
对于每个邮箱,我希望缩略图向左浮动,文本向右浮动.我不希望拇指环绕文本.
这是我的HTML代码:
<div class="post-container">
<div class="post-thumb"><img src="thumb.jpg" /></div>
<div class="post-title">Post title</div>
<div class="post-content"><p>post description description description etc etc etc</p></div>
</div>
我已经尝试了几种方法但仍然无法使其工作......文本将不会显示在右侧...
这是我的CSS代码:
.post-container{
margin: 20px 20px 0 0;
border:5px solid #333;
}
.post-thumb img {
float: left;
clear:left;
}
.post-content {
float:right;
}
推荐指数
解决办法
查看次数
放大时,Chrome中的边框会消失
我有这个非常简单的形式:http://jsfiddle.net/TKb6M/91/.有时,当我使用Chrome放大或缩小时,输入边框会消失.例如,当我缩放到90%时,我得到:
当然,您的里程可能会有所不同.
如果你想知道这些<span>标签,我按照" 如何使输入元素占据所有剩余水平空间"的建议添加它们？.
我的CSS有问题,还是Chrome错误？它似乎在Firefox上运行良好.我该怎么做才能避免这种行为？
谢谢.
推荐指数
解决办法
查看次数
什么是CSS/DOM中阻止带有display:block的输入框扩展到其容器的大小
示例HTML/CSS:
<div class="container">
<input type="text" />
<div class="filler"></div>
</div>
div.container {
padding: 5px;
border: 1px solid black;
background-color: gray;
}
div.filler {
background-color: red;
height: 5px;
}
input {
display: block;
}
题
为什么输入框不能扩展到具有相同的外部宽度div.filler？也就是说,为什么输入框不像其他块元素那样扩展以适应其容器width: auto;？
我尝试检查Firebug中的"用户代理CSS",看看我是否可以在那里找到一些东西.没运气.我找不到CSS中的任何具体差异,我可以专门链接到输入框,其行为与常规不同div.filler.
除了好奇之外,我想知道为什么这是为了找到一种设置宽度并忘记它的方法.我目前明确设置两者input及其包含块元素宽度的做法似乎是多余的,而不是模块化的.虽然我熟悉将输入元素包装在div中然后将输入元素赋给负边距的技术,但这似乎是不可取的.
borkweb和Phrogz都提供了优秀的信息,利用了过去的border-box盒子模型.谢谢你!我想重申我的问题的重点,我打算不同于我对实际问题的拟议解决方案:
规范怎么样导致输入框格式化不像普通的块元素,如divs？边框解决方案很精彩,但它不能满足为什么输入框首先出现这种方式的原因以及为什么它们不能像普通的divs 那样表现出来,它们不使用边框这些天-box模型.
推荐指数
解决办法
查看次数
输入文本自动宽度填充100%,其他元素浮动
我有一个搜索框的以下布局:
<div id="emulating_variable_width">
<form id="srxForm" method="post">
<div id="qsrxSearchbar">
<div id="scope"> Person Name </div>
<input type="text" id="theq" title="Search">
<button id="btnSearch" type="button">Search</button>
</div>
</form>
</div>?
(为了显示目的,它非常简化)
- "范围"中的标题是一个长度可变的文本
我想要的是让输入文本元素填充所有可用空间(即黄色空间),同时保持搜索按钮在右侧.
哪个是完成IE7 +,FF,Safari等解决方案的最简单方法？
谢谢!
推荐指数
解决办法
查看次数