CSS让元素宽度自动增长而父级宽度自动
[英]css let element width auto grow while parent width auto
问题描述
我有这样的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>
样式可能不起作用，我只粘贴了它的基本部分。 我要实现的是，父元素具有最大宽度，它包含多行，每行有两个元素，“左”和“右”。 我给'left'元素一个固定的宽度，给'right'元素一个min-width / max-width。 我希望右边的元素的宽度随着内容的增长而自动增长，直到最大宽度，但是如果内容很短，右边的元素也会缩小。 我试过桌子和伸缩盒，但是没有运气。 谢谢你的帮助
5 个解决方案
解决方案1
0 2017-08-09 07:39:58
问题是因为您必须为.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>
解决方案2
0 2017-08-09 07:41:10
在此处找到代码笔示例，并根据您的要求进行检查。 另外，让我知道您是否想要得到什么。
.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;
}
解决方案3
0 2017-08-09 07:42:51
添加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;
}
请注意，您的伸缩容器（.row）受.container的最大宽度影响。
（编辑：误读了一些-应该现在就想要吗？）
解决方案4
0 2017-08-09 07:49:49
这个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/
解决方案5
-1 2017-08-09 07:48:37
我想您可以为您的课程“正确”尝试此课程
.right{
width:calc(100% - 100px);
}
为什么在相对定位的父元素 CSS 上尊重高度自动但不尊重宽度自动
[英]Why is Height Auto Respected but Width Auto not Respected on Relative Positioned Parent Element CSS
CSS：将子div宽度自动设置为内容，而不是完整的父宽度
[英]CSS: Make child div width auto to content in it, not the full parent width
flex-grow = 1，width：auto和just width：100％之间的差异
[英]Difference between flex-grow = 1, width: auto and just width: 100%
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.