Javascript 在可变宽度的容器中对齐流体分区
你好，善良的互联网人，我有一个问题，我希望你能帮助我。我有一个这样的容器： 内部div向左浮动，以便它们并排排列。问题是，当有一个内部div比其他div更高时，下一行会很奇怪，并且有很多额外的空间 我希望它看起来像： 每个内部div（在图片中它不是缩放的）具有相同的宽度，但可能具有不同的高度。是否有一些css选项可以将每一行设置为在前一行的最高项下排列Javascript 在可变宽度的容器中对齐流体分区,javascript,html,css,Javascript,Html,Css,你好，善良的互联网人，我有一个问题，我希望你能帮助我。我有一个这样的容器： 内部div向左浮动，以便它们并排排列。问题是，当有一个内部div比其他div更高时，下一行会很奇怪，并且有很多额外的空间 我希望它看起来像： 每个内部div（在图片中它不是缩放的）具有相同的宽度，但可能具有不同的高度。是否有一些css选项可以将每一行设置为在前一行的最高项下排列 <style> .objectContainer {
<style>
.objectContainer
{ background-color: #e1e8fa;
border-radius: 5px;
padding:4px;
width: 280px;
float: left;
margin: 7px;
-moz-box-shadow: 0 0 3px #000000;
-webkit-box-shadow: 0 0 3px #000000;
box-shadow: 0 0 3px #000000;
display:inline-block;
position:relative;
vertical-align:top;
}
.innerContainer
{ padding: 4px;
margin: 4px;
min-height: 95px;
max-height: 140px;
outline: 1px dashed #5c5c5c;
background-color: white;
}
.tab {
padding-left: 15px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
height: 18px;
width: 150px;
border-top: 1px dashed;
border-left: 1px dashed;
border-right: 1px dashed;
border-color: #5c5c5c;
border-radius: 10px 10px 0px 0px;
position: relative;
}
</style>
<div id="mainContainer" class="main_container" >
<div class="main" style="padding-bottom: 20px;">
<div class="listviewheader">
<div style="clear:both;" class="objectContainer" id="container_2483" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #e3c785 , white); background: -o-linear-gradient(right, #e3c785, white); background: -moz-linear-gradient(right, #e3c785, white); background: linear-gradient(to right, #e3c785 , white);">x</div>
<input type="hidden" name="note_2483" id="note_2483" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2483" style="clear: both; background-color: #fdfce2; " class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2484" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #c1e194 , white); background: -o-linear-gradient(right, #c1e194, white); background: -moz-linear-gradient(right, #c1e194, white); background: linear-gradient(to right, #c1e194 , white);">x</div>
<input type="hidden" name="note_2484" id="note_2484" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2484" style="clear: both; background-color: #fdfce2; " class="innerContainer" name="innerContainer">
</br></br></br></br></br></br>
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2496" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #e3c785 , white); background: -o-linear-gradient(right, #e3c785, white); background: -moz-linear-gradient(right, #e3c785, white); background: linear-gradient(to right, #e3c785 , white);">x</div>
<input type="hidden" name="note_2496" id="note_2496" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2496" style="clear: both;" class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2495" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #e3c785 , white); background: -o-linear-gradient(right, #e3c785, white); background: -moz-linear-gradient(right, #e3c785, white); background: linear-gradient(to right, #e3c785 , white);">x</div>
<input type="hidden" name="note_2495" id="note_2495" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2495" style="clear: both;" class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2481" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #e3c785 , white); background: -o-linear-gradient(right, #e3c785, white); background: -moz-linear-gradient(right, #e3c785, white); background: linear-gradient(to right, #e3c785 , white);">x</div>
<input type="hidden" name="note_2481" id="note_2481" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2481" style="clear: both; background-color: #fdfce2; " class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
<div style="" class="objectContainer" id="container_2482" name="objectContainer">
<div class="tab" style="float: left; position: relative; left: 3px; background: -webkit-linear-gradient(left, #c1e194 , white); background: -o-linear-gradient(right, #c1e194, white); background: -moz-linear-gradient(right, #c1e194, white); background: linear-gradient(to right, #c1e194 , white);">x</div>
<input type="hidden" name="note_2482" id="note_2482" value="">
<div style="float: right; position: relative; "></div>
<div id="innerContainer_2482" style="clear: both; background-color: #fdfce2; " class="innerContainer" name="innerContainer">
</div><div style='clear:both;'></div>
</div>
</div>
<div style='clear:both;'>
</div>
</div>
.objectContainer
{背景色：#e1e8fa；
边界半径：5px；
填充：4px；
宽度：280px；
浮动：左；
利润率：7px；
-moz盒阴影：0 3px#000000；
-网络工具包盒阴影：0 3px#000000；
盒影：03px#000000；
显示：内联块；
位置：相对位置；
垂直对齐：顶部；
}
.innerContainer
{填充：4px；
保证金：4倍；
最小高度：95px；
最大高度：140像素；
轮廓：1px虚线#5c；
背景色：白色；
}
.标签{
左侧填充：15px；
-webkit盒阴影：插入0 1px 1px rgba（0,0,0,0.05）；
-moz盒阴影：插入0 1px 1px rgba（0,0,0,0.05）；
盒影：插入0 1px 1px rgba（0,0,0,0.05）；
高度：18px；
宽度：150px；
边框顶部：1px虚线；
左边框：1px虚线；
右边框：1px虚线；
边框颜色：#5c；
边界半径：10px 10px 0px 0px；
位置：相对位置；
}
x
x
x
x
x
x
显示：内联块位置：相对
最重要的是，垂直对齐：顶部
那就够了 将内部div的css设置为display:inline block位置：相对
最重要的是，垂直对齐：顶部
那就够了 使用网格系统。无论是Bootstrap还是ZURB基金会都很好。如果您决定自己做，我可以告诉您最重要的技巧是使用“after”伪选择器清除浮点。下面是基本的网格设计。只有在避免柱中可选填充物的问题时，才需要调整盒尺寸
然后使用CSS
.罗：之后{
内容：“；
明确：两者皆有；
显示：块；
身高：0；
宽度：0；
溢出：隐藏；
}
上校33{
宽度：33.33%；
浮动：左；
框大小：边框框；
}
第一列
第二栏
第三列
第一列
第二栏
第三列
使用网格系统。无论是Bootstrap还是ZURB基金会都很好。如果您决定自己做，我可以告诉您最重要的技巧是使用“after”伪选择器清除浮点。下面是基本的网格设计。只有在避免柱中可选填充物的问题时，才需要调整盒尺寸
然后使用CSS
.罗：之后{
内容：“；
明确：两者皆有；
显示：块；
身高：0；
宽度：0；
溢出：隐藏；
}
上校33{
宽度：33.33%；
浮动：左；
框大小：边框框；
}
第一列
第二栏
第三列
第一列
第二栏
第三列
您可以使用引导按行分隔div
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-4" id="box1">box 1</div>
<div class="col-md-4" id="box2">box 2</div>
<div class="col-md-4" id="box3">box 3</div>
</div>
<div class="row">
<div class="col-md-4" id="box4">box 4</div>
<div class="col-md-4" id="box5">box 5</div>
<div class="col-md-4" id="box6">box 6</div>
</div>
</body>
</html>
方框1
方框2
方框3
方框4
方框5
方框6
它看起来像这样，高度和背景颜色都改变了。
您可以使用引导按行分隔div
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-4" id="box1">box 1</div>
<div class="col-md-4" id="box2">box 2</div>
<div class="col-md-4" id="box3">box 3</div>
</div>
<div class="row">
<div class="col-md-4" id="box4">box 4</div>
<div class="col-md-4" id="box5">box 5</div>
<div class="col-md-4" id="box6">box 6</div>
</div>
</body>
</html>
方框1
方框2
方框3
方框4
方框5
方框6
它看起来像这样，高度和背景颜色都改变了。
寻求代码帮助的问题必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。看见您不能只使用实际行吗？您可能需要查看或。@Terry不确定这是常见的砌体类型问题。简单的实际行应该足够了。你有什么建议我可以用实际行来做这个吗？页面是使用PHP生成的，div的数量会发生变化。这一页很长