相关疑难解决方法(0)

例如,我有一些类.article,我想将此类视为网格视图.所以我应用了这种风格:

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

该样式将使.article看起来平铺/网格.固定高度可以正常工作.但是如果我想将高度设置为自动(根据其中的数据自动拉伸),网格看起来很讨厌.

而我想这样的观点:

我有无限数量的100px宽度的div,可以放入250px宽度的父级.无论高度如何,我都需要将div显示在行中,如图所示.我已经尝试过解决这个问题,但div高度似乎搞砸了.

我非常感谢你的帮助.谢谢 :)

        <style>
            #holder{
            width:250px;
            border:1px dotted blue;
            display:inline-block;
        }
        .box{
            width:100px;
            height:150px;
            background-color:#CCC;
            float:left;
            text-align:center;
            font-size:45px;
            display:inline-block;
        }
        .one{
            background-color:#0F0;
            height:200px;
        }

        .two{
            background-color:#0FF;
        }

        .three{
            background-color:#00F;
        }

        .four{
            background-color:#FF0;
        }
    </style>

    <div id="holder">
        <div class="box one">1</div>
        <div class="box two">2</div>
        <div class="box three">3</div>
        <div class="box four">4</div>
    </div>

这是jsfiddle

这是我用javascript https://jsfiddle.net/8o0nwft9/所做和所取得的成就

我在页面上有很大一部分文本，当屏幕变大时，我有媒体查询来使文本形成列。但是，当我这样做时，有些照片并没有完全进入一列。

无论出于何种原因，它都会拆分照片并将其中的一部分显示在一列底部，其余部分显示在下一列中。这也发生在 div 上。如果我交换了白色特征 div 和图像，那么它也会自行分裂。

这是我的代码的一部分，带有一个快速示例：

.content-heading h1{
	border-top: 10px solid;
	margin-top: 100px;
	padding-top: 15px;
	line-height: 1;
	display:  inline-block;
}
.content-heading h2{
	padding-bottom: 15px;
	margin-bottom: 50px;
}
.img-box{
	background-position: center top;
	background-size:cover;
	border-radius: 8px;
	height: 250px;
	width: 250px;
	border: 8px solid #fff;
}
.container-fluid.no-pad{
  padding:0;
}
#youth-development{
    color:  #fff;
    position:  relative;
    background: rgba(244, 121, 32, 1);
}
#youth-development h1{
    border-top: 10px solid #fff;
    padding-top: 15px;
    margin-top: 0;
    display:  inline-block;
    padding-right: 99px;
}	
#youth-development h2{
	padding-bottom: 15px;
}
#youth-development .column-content{ …