我想要一个双列div布局,其中每个都可以有可变宽度,例如
div {
float: left;
}
.second {
background: #ccc;
}<div>Tree</div>
<div class="second">View</div>我希望'view'dec扩展到'tree'div填充所需空间后可用的整个宽度.目前我的'view'div被调整为它包含的内容.如果两个div占据整个高度也会很好
不重复免责声明:
当float:left设置时,将div扩展到max width, 因为左边的一个具有固定的宽度.
帮助div - 使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填补其余部分？
我环顾四周SO,但找不到与我的匹配相匹配的一个,我基本上有两列固定宽度(185px),另一列没有固定宽度,但我需要最后一列填充最后一个空格,例如
...........................................
.--------- ------------------------------.
.+ + + +.
.+ + + +.
.+ + + +.
.+ + + +.
.+ + ------------------------------.
.+ + .
.+ + .
.+ + .
.--------- .
...........................................
当第二列填充剩余宽度时,第一列应该总是100%到底部,它们都是浮动的left,如果我调整浏览器窗口的大小,第二列显示在第一列下面.我需要第二列来填充剩余的宽度,并在调整浏览器窗口大小时保持灵活性.
好吧,伙计们,我一直在打破这个球.
我有三个div; 左,中,右.全部100%高度.左右div的固定宽度为150px.现在我希望中间div占用剩下的空间.
示例:这里
CSS:
#left {
height:100%;
width:150px;
float:left;
background:red;
z-index:999;
}
#middle {
height:100%;
width:100%;
background:yellow;
margin-left:-150px;
margin-right:-150px;
}
#right {
float:right;
height:100%;
width:150px;
background:red;
z-index:998;
}
我想为我的营销网站制作一个3列布局,顶部横幅中有图像.
我希望液体左/右侧有一个固定的中心.理想情况下,html看起来像这样:
<div id="pixelLeft"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </div>
<style>
#pixelLeft { background: url(../../images/pixel_left_fixed.png) 0 0 repeat-x; }
#pixelRight { background: url(../../images/pixel_right_fixed.png) 0 0 repeat-x; }
#bannerCenter { /* something here to make fixed width of 1550px */ }
</style>
左/右像素侧的图像是1px×460px.图像mybanner.png是1550px x 460px.
提前致谢!(特别是如果它适用于所有浏览器!)
我目前的问题是我有三个div元素; 一个漂浮在左边,一个漂浮在右边,一个漂浮在这两个之间.我希望中心div自动拉伸到两个div之间可用宽度的最大宽度.
HTML
<div id="contain">
<div id="left">1</div>
<div id="filler"></div>
<div id="right">2</div>
</div>
CSS
#left {
text-decoration: none;
display: inline-block;
float: left;
width: auto;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#navFiller {
display: inline-block;
position: fixed;
float: left;
width: auto;
height: 45px;
background: #FF9000;
}
#right {
text-decoration: none;
display: inline-block;
float: right;
width: auto;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
} …我被要求创建一个表单,其中每个输入都有一个标签,其自然宽度(向左)和输入旁边(在右侧,在同一行内)填充剩余空间,以便每个输入的右边缘是垂直对齐.
除了在每个输入上设置显式宽度之外,有没有办法实现这一目标？从本质上讲,强制输入占用其父级剩余空间的100%？
没有关于如何使div填充剩余水平空间的答案？似乎对我有用,但我不确定为什么我的情况会有所不同.
<div class="name-field">
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
<div class="email-field">
<label for="email">Email address:</label>
<input type="email" id="email" />
</div>在上面的情况中,我希望每个包装div都是100%宽度,并且内部的元素完全填充该宽度,它们之间没有任何空间.
我有一个固定宽度的左div,我想让正确的div填充剩余的空间.
到目前为止,我一直采用另一个SO海报推荐的这种方法,但如果我在正确的div中有内容,它就不起作用.
右边div中的内容设置为width: 100%,所以我希望它不会比右边的div宽,但它会溢出右边的div.
<div>
<div id="left">left</div>
<div id="right">right<div id="insideright">overflows</div</div>
</div>
<style>
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}
#insideright {
width: 100%;
background-color: blue;
height: 5px;
}
</style>
JSFiddle在这里,演示问题:http://jsfiddle.net/MHeqG/155/
我能做什么？
我想支持旧的IE浏览器,所以display: table-cell如果我可以避免它,或者至少没有合理的后备,我宁愿不使用等.
在我正在制作的网页上，我想添加一个搜索栏。我有一个用于整个搜索栏的 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 方法可以实现这一点。