Question

你好，互联网生物，我有一个问题，希望你能帮忙。我有一个像这样的容器：

内部div向左浮动，以便它们并排排列。问题是当有一个比其他人更高的内部div时，下一行很奇怪并且有很多额外的空间。

我更喜欢它看起来像：

每个内部div（图中未按比例）具有相同的宽度，但可能具有不同的高度。是否有一些css选项可以将每一行设置为在前一行的最高项目下排成一行，也许？

           <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>

Answer 1

将内部div的css设置为git mv -f -f，最重要的是，display:inline-block;

应该这样做！

Answer 2

您可以使用bootstrap按行分隔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>

看起来像这样，高度和背景颜色发生了变化。

Answer 3

使用网格系统。无论是bootstrap还是zurb基础都可以正常工作。如果您决定自己做，我可以告诉您最重要的技巧是使用“after”伪选择器来清除浮动。以下为您提供基本的网格设计。盒子大小调整只是为了避免列中可选填充的麻烦。

Then CSS with

    .row:after{
        content: "";
        clear: both;
        display: block;
        height: 0;
        width: 0;
        overflow: hidden;
    }
    .col-33{
        width: 33.33%;
        float: left;
        box-sizing: border-box;
    }

    <div class="row">
        <div class="col-33">
            First col
        </div>
        <div class="col-33">
            Second col
        </div>
        <div class="col-33">
            Third col
        </div>
    </div>
    <div class="row">
        <div class="col-33">
            First col
        </div>
        <div class="col-33">
            Second col
        </div>
        <div class="col-33">
            Third col
        </div>
    </div>

流体div在可变宽度的容器中的对齐

3 个答案: