CSS 中的 Flexbox 两列

问题描述 投票：0回答：1

我在一个部分中有两列。 图像中的第一列。 第二列只是文本。 我希望这些能够弯曲。 问题是，当我尝试弯曲内容时图像变得太小有什么想法吗？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox with flex-wrap</title>
<style>
    .container {
        display: flex;
        flex-wrap: wrap; 
        gap: 1rem;
    }

    .d-column {
        flex:2 1 200px; 
        border: 1px solid #ccc;
        box-sizing: border-box; 
    }
  .img-container{
    flex:1 0 200px; 
    width: fit-container;
    border-raduis: 12px;
  }
  
  img{
    max-width: 100%;
    min-height: 100%;
    object-fit:cover;
    border-radius: 12px;
    aspect-ratio: 2/1;
  }
</style>
</head>
<body>

<div class="container">
    <div class="img-container">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSCLYgZkVCSbBRILyzR3yMNgiKunVGJ1LaWjZV-8Zy0H-LyGeNGedRizu0F_2bSq_Vsd85DnNveXZlqU7nH0tu4248W0jdu0NM0UBx9waE&usqp=CAc" alt="Image">
    </div>
    <div class="d-column">
        <h2>Column 2</h2>
        <p>This is the content of column 2.</p>
        <p>This content determines the height of column 1.</p>
        <p>This content can be as long as needed.</p>
    </div>
</div>

</body>
</html>

enter image description here

我尝试使用不起作用的内容

css image flexbox responsive-design
1个回答
0
投票

这有帮助吗：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox with flex-wrap</title>
<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: stretch; 
    }

    .img-container {
        flex: 1 1 200px; 
        box-sizing: border-box;
        border-radius: 12px;
    }
  
    img {
        width: 100%; 
        height: auto; 
        object-fit: cover; 
        border-radius: 12px;
    }

    .d-column {
        flex: 2 1 300px; 
        border: 1px solid #ccc;
        padding: 10px;
        box-sizing: border-box;
    }
</style>
</head>
<body>

<div class="container">
    <div class="img-container">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSCLYgZkVCSbBRILyzR3yMNgiKunVGJ1LaWjZV-8Zy0H-LyGeNGedRizu0F_2bSq_Vsd85DnNveXZlqU7nH0tu4248W0jdu0NM0UBx9waE&usqp=CAc" alt="Image">
    </div>
    <div class="d-column">
        <h2>Column 2</h2>
        <p>This is the content of column 2. This content determines the height of column 1. This content can be as long as needed.</p>
    </div>
</div>

</body>
</html>

这给出了

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.