中心2行5列彼此相邻

Question

我试图将2行5列彼此相邻但它只是不起作用。

代码（https://jsfiddle.net/anhuxthz/）：

2016-12-31T00:00:00+00:00

2017-01-01T02:00:00+00:00

Answer 1

喜欢这个吗？

在这里，我创建了.group div display: inline-block并给了它们20％的宽度（减去6px以覆盖标记创建的内联空白区域）

html {
}
body {
    overflow: hidden;
    margin: 40px 15px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
#distribution {
    position: absolute;
    margin-right: 10%;
    margin-left: 5%;
    border: 1px solid black;
    margin-bottom: 10%;
    width: 90%;
}
input {
    width: 10%;
    /*margin-left: 5.5%;*/
}
.imgCat {
    height: 15%;
    width: 15%;
    /*margin-left:1%;*/
}
span {
    font-weight: bold;
}
.group {
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    width: calc(20% - 6px);        /*  added property  */
    display: inline-block;         /*  added property  */
}

<div id="distribution">

        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>Algemene financiering</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">

            <img src="~/Images/care.png" class="imgCat">
            <p>Zorg en opvang</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>

        <div class="group">
            <img src="~/Images/house.png" class="imgCat">
            <p>Wonen en ruimtelijke ordening</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/police.png" class="imgCat">
            <p>Veiligheidszorg</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/culture.png" class="imgCat">
            <p>Cultuur en vrije tijd</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>Algemene financiering</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">

            <img src="~/Images/care.png" class="imgCat">
            <p>Zorg en opvang</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/house.png" class="imgCat">
            <p>Wonen en ruimtelijke ordening</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/police.png" class="imgCat">
            <p>Veiligheidszorg</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/culture.png" class="imgCat">
            <p>Cultuur en vrije tijd</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
</div>
        

也可以使用flex完成，并给它们宽度为20％（此处不需要额外的6px，因为灵活项目没有空白渲染）

html {
}
body {
    overflow: hidden;
    margin: 40px 15px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
#distribution {
    position: absolute;
    margin-right: 10%;
    margin-left: 5%;
    border: 1px solid black;
    margin-bottom: 10%;
    width: 90%;
    display: flex;         /*  added property  */
    flex-wrap: wrap;       /*  added property  */
}
input {
    width: 10%;
}
.imgCat {
    height: 15%;
    width: 15%;
}
span {
    font-weight: bold;
}
.group {
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    width: 20%;            /*  added property  */
}

<div id="distribution">

        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>Algemene financiering</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">

            <img src="~/Images/care.png" class="imgCat">
            <p>Zorg en opvang</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>

        <div class="group">
            <img src="~/Images/house.png" class="imgCat">
            <p>Wonen en ruimtelijke ordening</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/police.png" class="imgCat">
            <p>Veiligheidszorg</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/culture.png" class="imgCat">
            <p>Cultuur en vrije tijd</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
        <div class="group">
            <img src="~/Images/financiering.png" class="imgCat">
            <p>Algemene financiering</p>
            <input type="text" class="dFinan" value="0" readonly />
        </div>  
        <div class="group">

            <img src="~/Images/care.png" class="imgCat">
            <p>Zorg en opvang</p>
            <input type="text" class="dZorg" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/house.png" class="imgCat">
            <p>Wonen en ruimtelijke ordening</p>
            <input type="text" class="dWonen" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/police.png" class="imgCat">
            <p>Veiligheidszorg</p>
            <input type="text" class="dVeiligheid" value="0" readonly />
        </div>

        <div class="group">

            <img src="~/Images/culture.png" class="imgCat">
            <p>Cultuur en vrije tijd</p>
            <input type="text" class="dCultuur" value="0" readonly />
        </div>
</div>

Answer 2

在“row”div中封装每组5个div，并将每个“group”配置为body { margin: 0px; } .outer { height: 300px; flex-direction: column; display: flex; background: #99EEFF; } .inner { flex: 1; overflow-y: scroll; } .inner-bottom { text-align: center }。

请注意，当您将组div配置为<div class="outer"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis fugiat nulla asperiores rerum sed dignissimos vitae odit consectetur perferendis! Suscipit qui hic iste est tempora blanditiis odit distinctio odio quas amet. Fuga mollitia maxime labore non odio laborum ea facilis distinctio blanditiis exercitationem atque et, facere illo repellat praesentium inventore iure. Minus error expedita veritatis doloribus esse, at cum molestias odit saepe animi harum similique, dolore distinctio est a quidem beatae! Aliquam, similique autem ipsa vitae eligendi iure consectetur. Quasi, odio expedita consequatur, maxime, libero maiores incidunt quia debitis hic provident cum, deleniti? Illo id pariatur, recusandae tenetur! Beatae cum, fuga! Nulla animi deserunt molestiae eum quia dolorum necessitatibus quod eos saepe sint eaque id est cupiditate impedit, doloribus consequuntur ipsum maiores consequatur alias. Magnam accusantium ab quia laudantium iste eum nobis sequi error, atque suscipit repellendus officiis laboriosam alias eos ullam. At inventore quam ullam officia sequi, aliquam. Aperiam dicta eum illo tempora, quas doloribus ducimus sequi placeat, aut id quaerat iure officiis nostrum accusamus atque odio repudiandae saepe autem distinctio. Qui expedita cum animi totam maxime minima labore vitae reprehenderit eligendi porro odio, voluptatem obcaecati sint enim, velit dolores, dolore fugit incidunt sit. Doloremque suscipit, quia libero. Odit nihil beatae eaque suscipit aperiam hic tempore ipsam non quam doloremque, nesciunt voluptate laboriosam a animi assumenda iste velit sunt cumque minima. Quos perferendis, labore. Consectetur quod sequi commodi nesciunt suscipit, molestiae, quia est cum. Beatae nulla, suscipit ducimus nobis voluptas illum enim dicta distinctio similique aliquam sapiente impedit ea non corrupti omnis est obcaecati labore laboriosam quaerat tempora molestias sunt laudantium doloremque? Perspiciatis dolore, excepturi, voluptate nulla nam culpa nostrum dolor, rerum quas iure dolorem incidunt consequatur dolores dolorum laborum ipsam eaque quasi accusamus voluptatum voluptates quisquam. Perspiciatis maxime, assumenda itaque eligendi dolore iste libero debitis ea sint expedita eius illum blanditiis inventore officiis voluptates minima iusto fuga nulla veritatis quo deserunt ad quisquam. Cumque numquam nihil tenetur itaque obcaecati soluta, libero possimus dolore ipsa eum neque amet sunt ad sapiente quos quae deleniti voluptas illo molestiae. Nihil officiis, commodi fugiat architecto blanditiis! Atque neque numquam nobis voluptates accusantium libero tempore veniam fugit officiis alias soluta rem enim, totam aut eos, nam. Fuga labore fugiat, suscipit consequatur ipsum quia praesentium. Reprehenderit praesentium maxime, ea maiores repellat, facere architecto quasi vitae a hic similique impedit commodi dolor, quas necessitatibus saepe ipsum. Nulla distinctio corporis dolor praesentium eum laudantium, asperiores magni minus tempora, iusto veritatis fuga. Totam ratione incidunt, neque blanditiis iure corporis consectetur ea dignissimos nesciunt tenetur ab placeat, harum eaque laboriosam numquam quas ipsum! Earum aperiam, voluptatibus assumenda quisquam dolorem ut eius non provident numquam nostrum rerum, magnam voluptatum beatae quibusdam quasi ad consequuntur perspiciatis fugiat soluta ipsa excepturi! Earum, accusamus quidem! Quos, eaque inventore perferendis quia officiis tempore sequi repellendus incidunt quo, numquam aut mollitia, atque earum architecto. Harum ipsa debitis necessitatibus quos sapiente ad deleniti quod non nihil libero iure voluptatem, omnis possimus tempore eos recusandae! Provident modi nulla dicta, aut possimus dolores nesciunt officiis sunt! Sunt! </div> <div class="inner-bottom"> This text should be inside the blue background </div> </div>时，它们将失去高度。要解决此问题，请在其父div上使用float:left。见What is a clearfix?

CSS：

float:left

这样的事情：

jsFiddle Demo

或

overflow:hidden

.group {float:left;width:19.5%;}
.row {overflow:hidden;}

Answer 3

你试过这张桌子吗？

<center>
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 5</td>
</tr>
</table>
</center>

Answer 4

（编辑：5 x 2，而不是相反）

添加此CSS，它应该执行您想要的操作（使用flex和wrap）

#distribution {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}
.group {
  width: 20%;
}

小提琴：https://jsfiddle.net/b746Lz7m/2/

Answer 5

我建议使用弹性框：https://jsfiddle.net/anhuxthz/3/

将您的列包裹在column div中，并将此代码添加到css：

#distribution {
  display: flex;
  align-items: center;
}

.column {
  flex-direction: column;
  align-items: center;
  margin: auto;
}

你应该全力以赴！

Answer 6

我为你更新了你的小提琴。

https://jsfiddle.net/anhuxthz/6/

<requestHandler name="/analysis/field" class="solr.FieldAnalysisRequestHandler" />

您需要对商品进行分组。并将绝对宽度应用于该组 - 这是您可以执行保证金的唯一方法：0 auto;将它对齐在父级中心。然后可以通过浮动对齐项目。