CSS让元素的宽度自动增长，同时母公司宽度自动

我有一个HTML结构类似这样的一些基本风格CSS让元素的宽度自动增长，同时母公司宽度自动

.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>

的风格可能不工作，我只贴的基本组成部分它。我想要实现的是，父元素有一个最大宽度，它包含多行，每行有两个元素，'左'和'右'。我将固定宽度设置为'left'元素，将最小宽度/最大宽度设置为'right'元素。我希望随着内容的增长，右元素的宽度会自动增长，直到最大宽度，但如果内容很短，正确的元素也会缩小。我试过桌子和弹性盒，但没有运气。感谢您的帮助

来源

2017-08-09 mok

问题是因为您必须指定.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>

来源

2017-08-09 07:39:58

非常感谢您的帮助，对不起，回复这么晚了，我是在做其他任务的一对夫妇的日子。你的答案正在起作用。但不知何故，它不是在我的网站上工作。我创建了一个[codepen示例]（https://codepen.io/hansen1416/pen/RZgYbd）。我的权利要素不会增长到200px，我只花了几个小时来解决这个问题。它几乎让我发疯。 – mok

这里找到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; 
    }

来源

2017-08-09 07:41:10 Abinthaha

非常感谢您的帮助，很抱歉回复这么晚，我还在做几天的任务。你的答案正在起作用。但不知何故，它不是在我的网站上工作。我创建了一个[codepen示例]（https://codepen.io/hansen1416/pen/RZgYbd）。我的权利要素不会增长到200px，我只花了几个小时来解决这个问题。它几乎让我发疯。 – mok

添加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的最大宽度影响。

（编辑：误读了一下 - 应该是像你想现在？）

来源

2017-08-09 07:42:51

非常感谢您的帮助，很抱歉回复这么晚，我在做几天的任务。你的答案正在起作用。但不知何故，它不是在我的网站上工作。我创建了一个[codepen示例]（https://codepen.io/hansen1416/pen/RZgYbd）。我的权利要素不会增长到200px，我只花了几个小时来解决这个问题。它几乎让我发疯。 – mok

我想你可以试试这个为你的类“正确的”

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

来源

2017-08-09 07:48:37

这个怎么样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/

来源

2017-08-09 07:49:49 Happysmithers

CSS让元素的宽度自动增长，同时母公司宽度自动

回答

相关问题