多年来我一直有这个问题,之前我见过类似的问题,但是没有一个问题解决过这样width: 100%一个事实:当设置元素时 - 填充,边距和边框会增加宽度.
看看这个小提琴.
白色最顶部的文本框是标准文本框,其宽度设置为100%.正如您所看到的那样,由于边距,填充和边框设置,它会溢出它的父级.
绿色文本框的样式类似于div使用position: absolute.这在webkit浏览器中就像一个梦想,但在其他任何地方都没有.
红色div是控件 - 我希望输入就像那样.
我可以使用任何黑客/技巧让我的文本输入就像所有现代浏览器中的红色div一样,换句话说,是否适合父级的填充？请编辑我的小提琴或创建自己的答案.谢谢!
看看我拥有并运行的网站的这个页面设计:
http://www.jungledragon.com/image/9472/barn_owl_close-up.html
如您所见,这涉及经典的双列布局.事情的顺序很重要.例如,您可以直接在照片旁边看到这个问题.
我现在正在编写针对该网站的响应式设计,并面临挑战.想象一下在狭窄的智能手机视口上的页面.经典的策略是简单地"堆叠"左侧下方的右列,让用户垂直滚动.然而,就元素的排序而言,这远非理想."specie"区块将位于照片下方,用户首先必须滚动评论之类的内容才能看到照片与硬币之间的关系.
我正试图解决这个问题,而这篇解释CSS的flexbox作为可能的解决方案的文章听起来非常有希望:
http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography
这里的想法是只使用CSS,可以改变元素的视觉顺序,正是我需要的.不幸的是,从那时起,我了解到该文章使用了过时的规范,并且新规范几乎不受任何浏览器的支持:
http://css-tricks.com/old-flexbox-and-new-flexbox/
这种废墟对我而言.不过,我还是想在概念层面提出我的问题:
我见过的关于flexbox的所有演示都有这样简单的标记:
<div id="somecontainer">
<div id="child1"></div>
<div id="child2"></div>
</div>
接下来,容器被声明为flexbox,方向垂直.最后,为每个子元素分配一个订单.这允许例如使用单个CSS语句将child2移动到child1之上.
现在问题就在这里.如果实际标记在某些意义上更复杂,那么还有其他层次结构在起作用？一个例子:
<div id="somecontainer">
<div id="colmain">
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
</div>
<div id="colside">
<div id="content4"></div>
<div id="content5"></div>
<div id="content6"></div>
</div>
</div>
如您所见,此标记具有其他层次结构,要重新排序的实际内容块不是最高级别容器的直接子元素.他们是孩子,但不是直接的孩子.
flexbox和子元素的重新排序是否适用于这种情况？例如,"content5"可以在"content1"和"content2"之间移动吗？
无论浏览器支持不佳,我都试图在概念上理解是否支持它.我问的原因是因为额外的列层次结构在标记中非常常见,如果flexbox重新排序仅适用于直接子节点,那将完全糟糕.
我有一个搜索框的以下布局:
<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等解决方案的最简单方法？
谢谢!
在我正在制作的网页上，我想添加一个搜索栏。我有一个用于整个搜索栏的 div 容器，里面有一个文本输入和一个按钮。我想要实现的是，文本输入填充除搜索按钮之外的整个父 div。
目前 HTML 是这样的：
<div style="margin: 8px; margin-bottom: 32px; padding: 1px; background-color: #888; ">
<input type="text" name="search" placeholder="Search..." style="padding: 14px; font-size: 16px;">
<button type="submit" style="float: right; padding: 16px;">
<i class='fa fa-search'></i>
</button>
</div>
我尝试在宽度中输入“100%”，但这不起作用。我可以使用 JS，但我确信有一种简单、简单的 html 方法可以实现这一点。