Question

我有像这样的html结构和一些基本风格

.container {
  display: block;
  width: auto;
  /* this is must */
  height: auto;
  /* this is must */
  max-width: 300px;
}

.container .row {
  display: flex;
  width: 100%;
  height: auto;
}

.container .row .left {
  display: inline-block;
  width: 100px;
  height: auto;
}

.container .row .right {
  display: inline-block;
  width: auto;
  height: auto;
}

<div class="container">
  <div class="row">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="row">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="row">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

风格可能不起作用，我只粘贴了它的基本部分。我想要实现的是，父元素有一个max-width，它包含多行，每行有两个元素，'left'和'right'。我给'left'元素一个固定的宽度，给'right'元素一个min-width / max-width。我希望右边元素的宽度随着内容的增长自动增长，直到最大宽度，但如果内容很短，右边的元素也会缩小。我试过桌子和弹性盒子，但没有运气。谢谢你的帮助

Answer 1

问题是因为您必须为.right类指定最大宽度。

1）整个容器的最大宽度：300px和左边的宽度：是100px，所以剩下的200px;你可以把它放到右排。

2）增加了背景以便更好地理解。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
    .container {
        display: block;
        width: auto; /* this is must */
        height: auto; /* this is must */
        max-width: 300px;
    }
    .container .row{
        display: flex;
        width: 100%;
        height: auto;
        background-color:Red;
    }
    .container .row .left{
        display: inline-block;
        width: 100px;
        background-color:yellow;
    }
    .container .row .right{
        display: inline-block;
        height: auto;
         background-color:green;
         max-width: 200px;
         overflow:hidden;
    }
</style>
<body>

<div class="container">
    <div class="row">
        <div class="left">qweqweqwe</div>
        <div class="right">qweqweqwew<p>afdllssssssssdddddddddssssssssss</p><p>asdasdasdadsas</p></div>
    </div>
    <div class="row">
        <div class="left">qweqweqwe</div>
        <div class="right">qweqweqwe</div>
    </div>
    <div class="row">
        <div class="left">qweqweqw</div>
        <div class="right">qweqweqweqwe</div>
    </div>
</div>

</body>
</html>

Answer 2

在此处查找codepen示例，并根据您的要求进行检查。另外，如果您有什么想要的话，请告诉我。

    .container .row{
        display: flex;
        width: 100%;
        height: auto;
    }
    .container .row .left{
        display: inline-block;
        width: 100px;
        height: auto;
    }
    .container .row .right{
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 150px;
        overflow: hidden;
    }

Answer 3

将display: flex添加到您的.row课程并将min-width: 100px设置为.right - 请在此处查看有效的jsfiddle：https://jsfiddle.net/o3o9j4za/1/

<div class="container">
<div class="row">
    <div class="left">1234</div>
    <div class="right">4312</div>
</div>
<div class="row">
    <div class="left">1235</div>
    <div class="right">qweqwereqwr</div>
</div>
<div class="row">
    <div class="left">5342</div>
    <div class="right">3g43g3g3g</div>
</div>

.container {
    display: block;
    width: auto; /* this is must */
    height: auto; /* this is must */
    max-width: 300px;
}
.container .row{
    width: 100%;
    height: auto;
    display:flex;
}
.container .row .left{
    display: inline-block;
    height: auto;
    width: 100px;
    background-color:#ff0;
}
.container .row .right{
    display: inline-block;
    width: auto;
    min-width: 100px;
    height: auto;
    background-color:#f0f;
}

请注意，您的Flex容器（.row）受.container的max-width影响。

（编辑：误读了一下 - 应该就像你现在想要的那样？）

Answer 4

这个flexbox解决方案怎么样？我认为它最接近你想要的东西：

<div class="container">
  <div class="row">
    <div class="left">test left</div>
    <div class="right">test right</div>
  </div>
  <div class="row">
    <div class="left">test left</div>
    <div class="right">test right</div>
  </div>
  <div class="row">
    <div class="left">test left</div>
    <div class="right">test right</div>
  </div>
</div>


.container {
  padding: 2px;
  border: 1px solid green;
  max-width: 300px;
}

.row {
  display: flex;
  padding: 2px;
  border: 1px solid red;
  max-width: 300px;
}

.left {
  padding: 2px;
  border: 1px solid blue;
  width: 100px;
}

.right {
  padding: 2px;
  border: 1px solid purple;
  width: 180px;
}

小提琴： https://jsfiddle.net/xr7ebmsz/

Answer 5

我想你可以为你的班级尝试这个＆＃34;对＆＃34;

.right{
     width:calc(100% - 100px);
 }

css让元素宽度自动增长，而父宽度自动

5 个答案: