css 如何使包含列表和图像的flex列具有相同的宽度？

jgwigjjp  于 2023-10-21  发布在  其他
关注(0)|答案(1)|浏览(146)

在CSS Flexbox中，我想设置等宽列，当第一列有列表文本，第二列有一个大图像时。
这就是全部。只有2列的Flexbox。
问题是，在大多数教程中，示例是Flexbox容器中的3或4列，并且这些列中的文本量不同。所以最初这些列的宽度不同，因为这些列中的文本量不同。因此，在这些教程中给出的答案是应用：

.row-container > * {
  flex-basis: 100%;
}

在Flexbox容器的直接子容器上，如this video，问题就解决了。包含不同数量文本的列现在是等宽的。
在我的情况下，我有类似的布局，但在第一个Flexbox列我有文本，在第二个Flexbox列我只有一个图像，我想是响应大小。其结果是，目前，第二个Flexbox列比第一列大得多，只包含文本。我希望它们的宽度相等。

如何使这2个Flexbox列的大小（宽度）相同，并且第2列中的图像必须响应？
Photo

*,
*::before,
*::after {
  /* https://www.w3schools.com/cssref/css3_pr_box-sizing.php */
  box-sizing: border-box;
  /* https://www.w3schools.com/css/css3_box-sizing.asp */
}

:root {
  --background-col: #1B1B1B;
  /* previuosly the background was #FAF3F0 */
  --font-col: #F5F5F5;
  --transition-col: #EE578A;
  /* previous color was #0088A9 */
}

* {
  margin: 0 0;
  padding: 0 0;
}

html {
  margin: 1px 1px;
}

body {
  background-color: var(--background-col);
  /* previuosly the background was #FAF3F0 */
  color: var(--font-col);
  max-width: 1300px;
  margin: 1px auto;
  padding: 0 0;
  /* margin-left: auto; */
  /* margin-right: auto; */
  line-height: 1.3em;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
  outline: 1px solid pink;
}

.header-ulist>li,
a,
button {
  /* The > (child combinator) in .header-ulist > li is used to target only the immediate children of the <.header-ulist> element, providing more specific control over styling. */
  color: var(--font-col);
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
}

.main-header {
  display: flex;
  align-items: center;
  /* stretch, flex-start, flex-end, center, baseline */
  justify-content: space-between;
  /* flex-start, flex-end, !space-between!, center, space-evenly */
  flex-direction: row;
  /* row, row-reverse, column, column-reverse */
  gap: 2rem;
  padding: 1.5rem 2rem;
  outline: 1px solid pink;
}

.h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2em;
  text-align: center;
  text-transform: uppercase;
  outline: 1px solid pink;
}

.header-ulist {
  list-style: none;
  outline: 1px solid pink;
}

.header-ulist>li {
  /* select .header-ulist's direct children li elements  */
  display: inline-block;
  padding: 1rem 1rem;
}

.header-nav-anchor>a {
  /* select .header-nav-anchor's direct children a elements  */
  transition: all 0.4s ease 0s;
}

.header-nav-anchor>a:hover {
  color: var(--transition-col);
  /* previous color was #0088A9 */
}

.mroesler>button {
  padding: 1rem 2rem;
  background-color: var(--transition-col);
  /* previous color was #0088A9 */
  color: var(--background-col);
  border: none;
  border-radius: 1.5em;
  cursor: pointer;
  outline: 1px solid pink;
  transition: background-color 400ms ease 0ms, color 400ms ease 400ms;
  /* transition-property transition-duration transition-timing-function transition-delay */
}

.mroesler>button:hover {
  background-color: var(--background-col);
  color: var(--font-col);
}

.row-container {
  display: flex;
}

.row-container>* {
  flex-basis: 100%;
}
<body>
  <header class="main-header">
    <h1 class="h1">Joanna<br>Kowalska<br>Resume</h1>
    <nav class="header-nav">
      <ul class="header-ulist">
        <li class="header-nav-anchor"><a href="index.html">main pink</a></li>
        <li class="header-nav-anchor"><a href="index2.html">main gray1</a></li>
        <li class="header-nav-anchor"><a href="index3.html">main gray2</a></li>
        <li class="header-nav-anchor"><a href="myprojects.html">myprojects</a></li>
        <li class="header-nav-anchor"><a href="contact.html" target="_blank">contact</a></li>
      </ul>
    </nav>
    <a class="mroesler" href="https://mroesler.com/" target="_blank"><button>mroesler</button></a>
  </header>

  <div class="row-container">
    <section class="column-container">
      <h2 class="h2">Joanna Kowalska<br>Senior Accountant in<br> Captive Finance Organization<br>VFS Usługi Finansowe Sp&nbsp;z&nbsp;o.o.</h2>
      <p class="initial-paragraph">Joanna Kowalska Senior Accountant in Captive Finance Organization</p>
      <ul>
        <li>first responsibility description</li>
        <li>second responsibility description</li>
        <li>third responsibility description</li>
        <li>fourth responsibility description</li>
        <li>fifth responsibility description</li>
        <li>sixth responsibility description</li>
        <li>seventh responsibility description</li>
        <li>eighth responsibility description</li>
        <li>january 2022 - present moment</li>
      </ul>
    </section>

    <div class="img-container">
      <img class="img-fluid40" src="https://via.placeholder.com/800x300" alt="joanna_kowalska">
      <!-- <img src="images/wizytowka.png" alt="wizytowka" width="600"> -->
    </div>
  </div>

  <h2 class="previous">My Previous Positions<br>and Professional Experience</h2>
</body>
css

1条答案

按热度按时间
8ftvxx2r

8ftvxx2r1#

我已经将你的问题中的代码添加到下面的示例中，但主要的要点是你需要将min-width和max-width添加到你的内容中。
如果你给两个列都添加一个最小宽度，那么它们的大小都是一样的。
如果您将最大宽度添加到图像中，则它不会占用超过其容器大小的空间。
自己尝试下面的代码片段，看看是否有帮助。

*,
*::before,
*::after {
  /* https://www.w3schools.com/cssref/css3_pr_box-sizing.php */
  box-sizing: border-box;
  /* https://www.w3schools.com/css/css3_box-sizing.asp */
}

:root {
  --background-col: #1B1B1B;
  /* previuosly the background was #FAF3F0 */
  --font-col: #F5F5F5;
  --transition-col: #EE578A;
  /* previous color was #0088A9 */
}

* {
  margin: 0 0;
  padding: 0 0;
}

html {
  margin: 1px 1px;
}

body {
  background-color: var(--background-col);
  /* previuosly the background was #FAF3F0 */
  color: var(--font-col);
  max-width: 1300px;
  margin: 1px auto;
  padding: 0 0;
  /* margin-left: auto; */
  /* margin-right: auto; */
  line-height: 1.3em;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
  outline: 1px solid pink;
}

.header-ulist>li,
a,
button {
  /* The > (child combinator) in .header-ulist > li is used to target only the immediate children of the <.header-ulist> element, providing more specific control over styling. */
  color: var(--font-col);
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
}

.main-header {
  display: flex;
  align-items: center;
  /* stretch, flex-start, flex-end, center, baseline */
  justify-content: space-between;
  /* flex-start, flex-end, !space-between!, center, space-evenly */
  flex-direction: row;
  /* row, row-reverse, column, column-reverse */
  gap: 2rem;
  padding: 1.5rem 2rem;
  outline: 1px solid pink;
}

.h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2em;
  text-align: center;
  text-transform: uppercase;
  outline: 1px solid pink;
}

.header-ulist {
  list-style: none;
  outline: 1px solid pink;
}

.header-ulist>li {
  /* select .header-ulist's direct children li elements  */
  display: inline-block;
  padding: 1rem 1rem;
}

.header-nav-anchor>a {
  /* select .header-nav-anchor's direct children a elements  */
  transition: all 0.4s ease 0s;
}

.header-nav-anchor>a:hover {
  color: var(--transition-col);
  /* previous color was #0088A9 */
}

.mroesler>button {
  padding: 1rem 2rem;
  background-color: var(--transition-col);
  /* previous color was #0088A9 */
  color: var(--background-col);
  border: none;
  border-radius: 1.5em;
  cursor: pointer;
  outline: 1px solid pink;
  transition: background-color 400ms ease 0ms, color 400ms ease 400ms;
  /* transition-property transition-duration transition-timing-function transition-delay */
}

.mroesler>button:hover {
  background-color: var(--background-col);
  color: var(--font-col);
}

.row-container {
  display: flex;
}

.column-container,
img-container {
  min-width: 50%;
}

.img-fluid40 {
  max-width: 100%;
}
<body>
  <header>
    <nav>
      <ul>
        <li class="header-nav-anchor"><a href="contact.html" target="_blank">contact</a></li>
      </ul>
    </nav>
    <a class="mroesler" href="https://mroesler.com/" target="_blank"><button>mroesler</button></a>
  </header>

  <div class="row-container">
    <section class="column-container">
      <h2 class="h2">Joanna Kowalska<br>Senior Accountant in<br> Captive Finance Organization<br>VFS Usługi Finansowe Sp&nbsp;z&nbsp;o.o.</h2>
      <p class="initial-paragraph">Joanna Kowalska Senior Accountant in Captive Finance Organization</p>
      <ul>
        <li>first responsibility description</li>
        <li>second responsibility description</li>
        <li>third responsibility description</li>
        <li>fourth responsibility description</li>
        <li>fifth responsibility description</li>
        <li>sixth responsibility description</li>
        <li>seventh responsibility description</li>
        <li>eighth responsibility description</li>
        <li>january 2022 - present moment</li>
      </ul>
    </section>

    <div class="img-container">
      <img class="img-fluid40" src="https://s.imgur.com/images/logo-1200-630.jpg?2" alt="joanna_kowalska">
      <!-- <img src="images/wizytowka.png" alt="wizytowka" width="600"> -->
    </div>
  </div>

  <h2 class="previous">My Previous Positions<br>and Professional Experience</h2>
</body>

</html>
赞(0）分享  回复(0）举报  2023-10-21
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com