我无法在“ DIV1”中应用“ justify-content：空格”，div包含列中的所有项目。
我尝试将DIV1及其任何父容器的高度更改为100％。 我试图将DIV1和“ ARTICLE_＃”元素的位置设置为相对和绝对。 我尝试将flex-grow：0设置为所有文章元素。
我试图消除溢出。 （这是因为当我将ARTICLE项的位置设置为相对时，两者之间的空间有效，但是所有文章之间都有ARTICLE大小的间隙。此测试仅在页面的实时版本上执行： https://utopistlist.com/renowned-nomads-vagabonds-and-hobos/ 如果您尝试设置以下内容：
.related .lome.tg-item {
position: relative !important;
}
作品之间的空间，但文章之间存在文章大小差距。 这不是原始代码，因为这些元素是从我的站点从动态版本导出到静态版本的，所以选择器已更改。 我已将列的高度从原始的5786px（活动页面）更改为7786px，因为否则，在提取的代码中将没有足够的对齐位置用于展示。
https://codepen.io/any_formless/pen/JjPXdQY
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://rawcdn.githack.com/internetwiki/examplecss/d85cd8dbe31678dc4f9786693a82614592dd0a12/example.css" media="screen" />
</head>
<div id="DIV_1">
<!-- The Grid item #1 -->
<article id="ARTICLE_2">
<div id="DIV_3">
<div id="DIV_4">
<div id="DIV_5">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/healthy_and_cheap_eats-1-min-1024x1024.png" id="IMG_6" />
</div>
<div id="DIV_7">
</div>
<div id="DIV_8">
<div id="DIV_9">
<div id="DIV_10">
<a href=" /healthy-and-cheap-eats/" id="A_11"></a><span id="SPAN_12">January 12, 2018</span>
<h2 id="H2_13">
<a href=" /healthy-and-cheap-eats/" id="A_14">healthy and cheap eats</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #2 -->
<article id="ARTICLE_15">
<div id="DIV_16">
<div id="DIV_17">
<div id="DIV_18">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy6.jpg" id="IMG_19" />
</div>
<div id="DIV_20">
</div>
<div id="DIV_21">
<div id="DIV_22">
<div id="DIV_23">
<a href="#" id="A_24"></a><span id="SPAN_25">August 9, 2019</span>
<h2 id="H2_26">
<a href="#" id="A_27">⠀⠀⠀⠀⠀⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #3 -->
<article id="ARTICLE_28">
<div id="DIV_29">
<div id="DIV_30">
<div id="DIV_31">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/robyn_davidson-min-1-1024x1024.png" id="IMG_32" />
</div>
<div id="DIV_33">
</div>
<div id="DIV_34">
<div id="DIV_35">
<div id="DIV_36">
<a href=" /female-explorers-and-travelers/" id="A_37"></a><span id="SPAN_38">January 4, 2018</span>
<h2 id="H2_39">
<a href=" /female-explorers-and-travelers/" id="A_40">woman explorers and travelers</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #4 -->
<article id="ARTICLE_41">
<div id="DIV_42">
<div id="DIV_43">
<div id="DIV_44">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy5.jpg" id="IMG_45" />
</div>
<div id="DIV_46">
</div>
<div id="DIV_47">
<div id="DIV_48">
<div id="DIV_49">
<a href="#" id="A_50"></a><span id="SPAN_51">August 9, 2019</span>
<h2 id="H2_52">
<a href="#" id="A_53">⠀⠀⠀⠀⠀⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #5 -->
<article id="ARTICLE_54">
<div id="DIV_55">
<div id="DIV_56">
<div id="DIV_57">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/franz_degenhardt-min-1-1-1024x1024.png" id="IMG_58" />
</div>
<div id="DIV_59">
</div>
<div id="DIV_60">
<div id="DIV_61">
<div id="DIV_62">
<a href=" /left-wing-musicians/" id="A_63"></a><span id="SPAN_64">January 15, 2018</span>
<h2 id="H2_65">
<a href=" /left-wing-musicians/" id="A_66">left-wing musicians</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #6 -->
<article id="ARTICLE_67">
<div id="DIV_68">
<div id="DIV_69">
<div id="DIV_70">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy3.jpg" id="IMG_71" />
</div>
<div id="DIV_72">
</div>
<div id="DIV_73">
<div id="DIV_74">
<div id="DIV_75">
<a href="#" id="A_76"></a><span id="SPAN_77">August 9, 2019</span>
<h2 id="H2_78">
<a href="#" id="A_79">⠀⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #7 -->
<article id="ARTICLE_80">
<div id="DIV_81">
<div id="DIV_82">
<div id="DIV_83">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/beingliberal-min-min-1024x1024.png" id="IMG_84" />
</div>
<div id="DIV_85">
</div>
<div id="DIV_86">
<div id="DIV_87">
<div id="DIV_88">
<a href=" /online-liberal-journals/" id="A_89"></a><span id="SPAN_90">January 5, 2018</span>
<h2 id="H2_91">
<a href=" /online-liberal-journals/" id="A_92">online liberal journals</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #8 -->
<article id="ARTICLE_93">
<div id="DIV_94">
<div id="DIV_95">
<div id="DIV_96">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy4.jpg" id="IMG_97" />
</div>
<div id="DIV_98">
</div>
<div id="DIV_99">
<div id="DIV_100">
<div id="DIV_101">
<a href="#" id="A_102"></a><span id="SPAN_103">August 9, 2019</span>
<h2 id="H2_104">
<a href="#" id="A_105">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #9 -->
<article id="ARTICLE_106">
<div id="DIV_107">
<div id="DIV_108">
<div id="DIV_109">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2017/12/slavojzizek-min-2-min-1-1024x1024.png" id="IMG_110" />
</div>
<div id="DIV_111">
</div>
<div id="DIV_112">
<div id="DIV_113">
<div id="DIV_114">
<a href=" /left-wing-philosophers/" id="A_115"></a><span id="SPAN_116">December 30, 2017</span>
<h2 id="H2_117">
<a href=" /left-wing-philosophers/" id="A_118">left-wing philosophers</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #10 -->
<article id="ARTICLE_119">
<div id="DIV_120">
<div id="DIV_121">
<div id="DIV_122">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy2.jpg" id="IMG_123" />
</div>
<div id="DIV_124">
</div>
<div id="DIV_125">
<div id="DIV_126">
<div id="DIV_127">
<a href="#" id="A_128"></a><span id="SPAN_129">August 9, 2019</span>
<h2 id="H2_130">
<a href="#" id="A_131">⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #11 -->
<article id="ARTICLE_132">
<div id="DIV_133">
<div id="DIV_134">
<div id="DIV_135">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2017/12/rogerscruton-min-1-min-1-1024x1024.png" id="IMG_136" />
</div>
<div id="DIV_137">
</div>
<div id="DIV_138">
<div id="DIV_139">
<div id="DIV_140">
<a href=" /right-wing-philosophers/" id="A_141"></a><span id="SPAN_142">December 30, 2017</span>
<h2 id="H2_143">
<a href=" /right-wing-philosophers/" id="A_144">right-wing thinkers</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #12 -->
<article id="ARTICLE_145">
<div id="DIV_146">
<div id="DIV_147">
<div id="DIV_148">
<img alt="" width="485" height="485" src=" /wp-content/uploads/2019/08/squarestudy1.jpg" id="IMG_149" />
</div>
<div id="DIV_150">
</div>
<div id="DIV_151">
<div id="DIV_152">
<div id="DIV_153">
<a href="#" id="A_154"></a><span id="SPAN_155">August 9, 2019</span>
<h2 id="H2_156">
<a href="#" id="A_157">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #13 -->
<article id="ARTICLE_158">
<div id="DIV_159">
<div id="DIV_160">
<div id="DIV_161">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/grigoriperelman-min-min-1024x1024.png" id="IMG_162" />
</div>
<div id="DIV_163">
</div>
<div id="DIV_164">
<div id="DIV_165">
<div id="DIV_166">
<a href=" /people-who-lived-alone-for-decades/" id="A_167"></a><span id="SPAN_168">January 6, 2018</span>
<h2 id="H2_169">
<a href=" /people-who-lived-alone-for-decades/" id="A_170">notable recluses</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #14 -->
<article id="ARTICLE_171">
<div id="DIV_172">
<div id="DIV_173">
<div id="DIV_174">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy7.jpg" id="IMG_175" />
</div>
<div id="DIV_176">
</div>
<div id="DIV_177">
<div id="DIV_178">
<div id="DIV_179">
<a href="#" id="A_180"></a><span id="SPAN_181">August 9, 2019</span>
<h2 id="H2_182">
<a href="#" id="A_183">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #15 -->
<article id="ARTICLE_184">
<div id="DIV_185">
<div id="DIV_186">
<div id="DIV_187">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2017/12/heartofglassfilm-min-1-min-1-1024x1024.png" id="IMG_188" />
</div>
<div id="DIV_189">
</div>
<div id="DIV_190">
<div id="DIV_191">
<div id="DIV_192">
<a href=" /art-house-films/" id="A_193"></a><span id="SPAN_194">December 30, 2017</span>
<h2 id="H2_195">
<a href=" /art-house-films/" id="A_196">art-house films</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #16 -->
<article id="ARTICLE_197">
<div id="DIV_198">
<div id="DIV_199">
<div id="DIV_200">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy8.jpg" id="IMG_201" />
</div>
<div id="DIV_202">
</div>
<div id="DIV_203">
<div id="DIV_204">
<div id="DIV_205">
<a href="#" id="A_206"></a><span id="SPAN_207">August 11, 2019</span>
<h2 id="H2_208">
<a href="#" id="A_209">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #17 -->
<article id="ARTICLE_210">
<div id="DIV_211">
<div id="DIV_212">
<div id="DIV_213">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/adamgreen-min-min-1-1024x1024.png" id="IMG_214" />
</div>
<div id="DIV_215">
</div>
<div id="DIV_216">
<div id="DIV_217">
<div id="DIV_218">
<a href=" /distinct-musicians/" id="A_219"></a><span id="SPAN_220">January 3, 2018</span>
<h2 id="H2_221">
<a href=" /distinct-musicians/" id="A_222">distinct musicians</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #18 -->
<article id="ARTICLE_223">
<div id="DIV_224">
<div id="DIV_225">
<div id="DIV_226">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy9.jpg" id="IMG_227" />
</div>
<div id="DIV_228">
</div>
<div id="DIV_229">
<div id="DIV_230">
<div id="DIV_231">
<a href="#" id="A_232"></a><span id="SPAN_233">August 11, 2019</span>
<h2 id="H2_234">
<a href="#" id="A_235">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #19 -->
<article id="ARTICLE_236">
<div id="DIV_237">
<div id="DIV_238">
<div id="DIV_239">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/munchausentrilemma-min-min-1-1024x1024.png" id="IMG_240" />
</div>
<div id="DIV_241">
</div>
<div id="DIV_242">
<div id="DIV_243">
<div id="DIV_244">
<a href=" /unsolved-problems-in-philosophy/" id="A_245"></a><span id="SPAN_246">January 4, 2018</span>
<h2 id="H2_247">
<a href=" /unsolved-problems-in-philosophy/" id="A_248">unsolved problems in philosophy</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #20 -->
<article id="ARTICLE_249">
<div id="DIV_250">
<div id="DIV_251">
<div id="DIV_252">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy10.jpg" id="IMG_253" />
</div>
<div id="DIV_254">
</div>
<div id="DIV_255">
<div id="DIV_256">
<div id="DIV_257">
<a href="#" id="A_258"></a><span id="SPAN_259">August 11, 2019</span>
<h2 id="H2_260">
<a href="#" id="A_261">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #21 -->
<article id="ARTICLE_262">
<div id="DIV_263">
<div id="DIV_264">
<div id="DIV_265">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/friedrichnietsche-min-min-1-2-1024x1024.png" id="IMG_266" />
</div>
<div id="DIV_267">
</div>
<div id="DIV_268">
<div id="DIV_269">
<div id="DIV_270">
<a href=" /atheist-philosophers/" id="A_271"></a><span id="SPAN_272">January 6, 2018</span>
<h2 id="H2_273">
<a href=" /atheist-philosophers/" id="A_274">atheist philosophers</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #22 -->
<article id="ARTICLE_275">
<div id="DIV_276">
<div id="DIV_277">
<div id="DIV_278">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy11.jpg" id="IMG_279" />
</div>
<div id="DIV_280">
</div>
<div id="DIV_281">
<div id="DIV_282">
<div id="DIV_283">
<a href="#" id="A_284"></a><span id="SPAN_285">August 11, 2019</span>
<h2 id="H2_286">
<a href="#" id="A_287">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #23 -->
<article id="ARTICLE_288">
<div id="DIV_289">
<div id="DIV_290">
<div id="DIV_291">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/thebluebrainproject-min-min-1-1024x1024.png" id="IMG_292" />
</div>
<div id="DIV_293">
</div>
<div id="DIV_294">
<div id="DIV_295">
<div id="DIV_296">
<a href=" /brain-inspired-artificial-intelligence-projects/" id="A_297"></a><span id="SPAN_298">January 6, 2018</span>
<h2 id="H2_299">
<a href=" /brain-inspired-artificial-intelligence-projects/" id="A_300">artificial brain intelligence</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #24 -->
<article id="ARTICLE_301">
<div id="DIV_302">
<div id="DIV_303">
<div id="DIV_304">
<img alt="" width="500" height="501" src=" /wp-content/uploads/2019/08/squarestudy12.jpg" id="IMG_305" />
</div>
<div id="DIV_306">
</div>
<div id="DIV_307">
<div id="DIV_308">
<div id="DIV_309">
<a href="#" id="A_310"></a><span id="SPAN_311">August 11, 2019</span>
<h2 id="H2_312">
<a href="#" id="A_313">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #25 -->
<article id="ARTICLE_314">
<div id="DIV_315">
<div id="DIV_316">
<div id="DIV_317">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/blockchain-min-min-1-1024x1024.png" id="IMG_318" />
</div>
<div id="DIV_319">
</div>
<div id="DIV_320">
<div id="DIV_321">
<div id="DIV_322">
<a href=" /startups-with-decentralizing-technologies/" id="A_323"></a><span id="SPAN_324">January 8, 2018</span>
<h2 id="H2_325">
<a href=" /startups-with-decentralizing-technologies/" id="A_326">decentralizing technologies</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #26 -->
<article id="ARTICLE_327">
<div id="DIV_328">
<div id="DIV_329">
<div id="DIV_330">
<img alt="" width="500" height="500" src=" /wp-content/uploads/2019/08/squarestudy13.jpg" id="IMG_331" />
</div>
<div id="DIV_332">
</div>
<div id="DIV_333">
<div id="DIV_334">
<div id="DIV_335">
<a href="#" id="A_336"></a><span id="SPAN_337">August 11, 2019</span>
<h2 id="H2_338">
<a href="#" id="A_339">⠀</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #27 -->
<article id="ARTICLE_340">
<div id="DIV_341">
<div id="DIV_342">
<div id="DIV_343">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/means_of_non_violent_action-min-min-1-1024x1024.png" id="IMG_344" />
</div>
<div id="DIV_345">
</div>
<div id="DIV_346">
<div id="DIV_347">
<div id="DIV_348">
<a href=" /means-of-nonviolent-action/" id="A_349"></a><span id="SPAN_350">January 10, 2018</span>
<h2 id="H2_351">
<a href=" /means-of-nonviolent-action/" id="A_352">means of nonviolent action</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- The Grid item #28 -->
<article id="ARTICLE_353">
<div id="DIV_354">
<div id="DIV_355">
<div id="DIV_356">
<img alt="" width="980" height="980" src=" /wp-content/uploads/2018/01/tiddlywiki-min-min-1024x1024.png" id="IMG_357" />
</div>
<div id="DIV_358">
</div>
<div id="DIV_359">
<div id="DIV_360">
<div id="DIV_361">
<a href=" /mind-mapping-tools/" id="A_362"></a><span id="SPAN_363">January 10, 2018</span>
<h2 id="H2_364">
<a href=" /mind-mapping-tools/" id="A_365">mind mapping tools</a>
</h2>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</html>
答案 0 :(得分：0)
Justify-content不能按预期工作，因为您的每篇文章都使用位置：绝对。当使用position：absolute时，元素的位置仅在乎top，left，right，bottom属性。
此外，由于每篇文章看起来都相同，因此您无需为每篇文章都使用单独的样式。
只需要一个名为.article的类，然后将所有样式放在此处即可。删除定位，让flexbox帮您解决。
编辑：
OP的解决方案也是整体答案的一部分。
OP的答案：
我找到了解决方案，父母之一（祖父母） 容器的高度不是100％。而且由于仅Stackoverflow 在代码字段中允许30000个字符，我无法发布整个 许多父容器编写代码。
答案 1 :(得分：0)
我找到了解决方案，其中一个父容器（祖父母）没有处于100％的高度。而且由于Stackoverflow在代码字段中仅允许30000个字符，所以我无法在许多父容器中发布整个代码。