相关疑难解决方法(0)
如何使Bootstrap列的高度相同？
我正在使用Bootstrap.如何将三根柱子制成相同的高度？
这是问题的屏幕截图.我希望蓝色和红色的列与黄色列的高度相同.
这是代码:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 panel" style="background-color: red">
some content
</div>
<div class="col-xs-4 panel" style="background-color: yellow">
catz
<img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
</div>
<div class="col-xs-4 panel" style="background-color: blue">
some more content
</div>
</div>
</div>919
推荐指数
推荐指数
16
解决办法
解决办法
80万
查看次数
查看次数
如何使浮动div的父级100%高度？
这是HTML:
<div id="outer">
<div id="inner"></div>
Test
</div>
这是CSS:
#inner {
float: left;
height: 100%;
}
在使用Chrome开发人员工具进行检查后,内部div的高度为0px.
如何强制它为父div的高度的100%？
251
推荐指数
推荐指数
7
解决办法
解决办法
32万
查看次数
查看次数
HTML/CSS将div设置为兄弟的高度
我有3个div包含在第三个.其中一个包含的div向左浮动,另一个向右浮动.我希望2兄弟div总是处于同一高度,但我遇到了这个问题.到目前为止,我只在Firefox中查看该页面,并且在我至少在一个浏览器中使用它之后发现我担心任何跨浏览器问题.
这是标记:
<div id="main-container" class="border clearfix">
<div id="left-div" class="border">
...
</div>
<div id="right-div" class="border">
...
</div>
</div>
这是CSS:
#main-container { position: relative; min-height: 500px; }
#left-div { position: relative; float: left; width: 700px; min-height: inherit; }
#right-div { position: relative; float: right; width: 248px; min-height: inherit; height: inherit; }
.clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; _height: 1%; clear: both; }
.clearfix { display: block; clear: both; }
.border …39
推荐指数
推荐指数
3
解决办法
解决办法
7万
查看次数
查看次数
<label>如何完全填充其父<td>？
这是相关代码(不起作用):
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; width: 100%; height: 100% }
</style>
</head>
<body>
<table>
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
原因是我希望在表格单元格中的任何位置单击以选中/取消选中该复选框.
编辑:顺便说一句,出于可访问性原因,请不要使用JavaScript解决方案.我尝试使用display:block; 但这只适用于宽度,而不适用于高度
35
推荐指数
推荐指数
2
解决办法
解决办法
5万
查看次数
查看次数
如何使div与父级相同(显示为表格单元格)
我有一个容器div包含三个子div(内容不同) - 每个div都和最高的一样高.我通过将容器设置为display:table和子div来显示:table-cell等来管理它.
一切正常,直到......
我在其中一个子div中插入了一个新的div并尝试使其高度:100% - 所以它会拉伸到与其父级相同的高度,但这不起作用.
请看我的JSFiddle:http://jsfiddle.net/bkG5A/
任何帮助将不胜感激!
HTML
<div class="container">
<div class="child">
a<br />a<br />a
</div>
<div class="child">
a<br />a<br />a<br />a<br />a<br />a<br />a
</div>
<div class="child">
<div class="content">
a<br />a<br />a
</div>
</div>
</div>
CSS
.container {
display: table;
}
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
}
.content {
height: 100%;
background-color: blue;
}
30
推荐指数
推荐指数
3
解决办法
解决办法
13万
查看次数
查看次数
是否有使用`display:table-cell`on divs的缺点？
我想要完成的是有一个固定宽度的第一个div和一个流动的第二个div,它将填充父div宽度的剩余宽度.
<div class='clearfix'>
<div style='float:left; width:100px;'>some content</div>
<div style='float:left'>some more content</div>
</div>
在这一点上,一切似乎都很好,流畅.
<div style='display:table'>
<div style='display:table-cell; width:100px;'>some content</div>
<div style='display:table-cell'>some more content</div>
</div>
我想继续第二个,但我觉得第二个例子将来会给我带来麻烦.
你能提供一些建议或见解吗？
17
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
如何使div相对于父母100%的身高？
我坚持用下面的东西.我需要制作右上角div 100%的高度(它的bgcolor将覆盖主div的全高).
<body>
<div id="main" style="width: 800px; margin: auto; text-align: left; border: 1px solid #628221; padding: 2px; background-color: #fff;">
<div id="left" style="float: left; width: 600px; background-color: #A7C864;">
<div id="left-top">left-top</div>
<div id="left-bottom">left-bottom</div>
</div>
<div id="right" style="float: right; width: 200px; background-color: #C7E48E;">
<div id="right-top">right-top</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
这里的工作示例:http: //marioosh.net/lay1.html
使用表格很简单:http: //marioosh.net/lay2.html
5
推荐指数
推荐指数
2
解决办法
解决办法
3万
查看次数
查看次数
如何将侧边栏扩展到页面的整个高度？
的jsfiddle
<div id="wrapper" class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="span2 sidebar">sidebar</div>
<div class="span10 content">content</div>
</div>
</div>
</div>
在过去的几个小时里,我一直在寻找谷歌,试图寻找解决方案.我不认为我可以做Faux Columns,因为该站点是基于Bootstrap构建的,因此侧栏宽度将根据浏览器的宽度而变化.
5
推荐指数
推荐指数
1
解决办法
解决办法
1264
查看次数
查看次数
如何给浮动侧边栏100%的父级高度？
这是我的jsFiddle
我想要一个像上面这样的布局,但我不想手动为我的侧边栏指定高度(正如我现在所做).我希望侧边栏高度与其父元素(即内容区域)相比是100%
<header> </header>
<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area"></div>
<div class="right-sidebar"></div>
</div>
<footer> </footer>
我的css
.content-area {
min-height: 310px;
background-color: #bbb;
}
.left-sidebar {
float: left;
width: 50px;
height: 310px;
background-color: #abcdef;
}
.right-sidebar {
float: right;
width: 50px;
height: 310px;
background-color: #abcdef;
}
1
推荐指数
推荐指数
1
解决办法
解决办法
1883
查看次数
查看次数