gpt4 book ai didi

css - flex 元素的宽度正在缩小

转载 作者:行者123 更新时间:2023-12-05 03:54:44 24 4
gpt4 key购买 nike

<分区>

我有一个带有“display: flex;”的 DIV包含 2 个相邻的子 DIV。第一个只是一个包含一些有序列表项的 DIV,第二个 DIV 包含一些图像。第二个 DIV 应用了 display: flexflex-wrap: wrap

出于某种原因,当我将第一个 DIV 的宽度设置为 200px 时,它不起作用...它没有获得 200px 的宽度。但是,如果我给它一个 200px 的 min-width,那么它就可以工作并获得 200px 的宽度。我需要了解为什么 width 不起作用而 min-width 起作用...

PLEASE VIEW THIS IMAGE BEFORE ANSWERING MY QUESTION!

/* Parent container that contains 2 child DIVs */

.parent_flex_container {
display: flex;
}


/* First child DIV */

#desktop_sidemenu {
width: 200px;
}


/* Second child DIV */

.flex_container {
display: flex;
flex-wrap: wrap;
}


/* Images of the second child DIV */

.Cac {
max-width: 50%;
height: 50%;
margin-bottom: 20px;
padding: 0 5px;
}
<div class="parent_flex_container">
<div id="desktop_sidemenu">
<nav>
<ul>
<li><a href="#">Arabic</a></li>
<li><a href="#">Green tea</a></li>
</ul>
</nav>
</div>

<div>
<div id="Featured_grid">
<div class="grid_title_holder">
<h2>Featured</h2>
</div>

<div class="flex_container">
<div class="Cac">
<img src="images/cover1.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover2.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover1.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover2.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover1.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover2.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover1.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>
<div class="Cac">
<img src="images/cover2.jpg" alt="" title="" />
<p class="Artist_name_holder">Artist Name</p>
<p class="Song_title_holder">Song Title</p>
</div>

</div>
</div>

</div>

</div>

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com