Question

https://jsfiddle.net/eh9h6etw/

当主包装中的两列中的一列受到最大宽度限制时，无论它是否也具有百分比值（例如30％），在调整大小（使窗口变大）时，第二列（70％）当然，直到主包装的边缘延伸到足够的时候才会运行，第二列70％加上固定的150px层不足以运行边缘到边缘，我怎么能让它运行到最后？我希望'蓝色'彩色div一直运行到另一端而不显示黄色间隙。

.main 
{
    float: left;
    width: 100%;
    background-color: yellow;
}

.rowholder
{
    background-color: cyan;
    float: left;
    width:70%;
}

.image
{
    background-color: orange;
    float: left;
    height: 150px;
    max-width: 150px;
    width: 30%;
}

.row
{
    background-color: blue;
    clear: both;
    float: left;
    width:100%;
}

<div class="main">
    <div class="image"></div>
    
    <div class="rowholder">
    <div class="row">This should span until the other edge</div>
    <div class="row">This should span until the other edge</div>
    </div>
</div>

乙

Answer 1

当主包装中的两列中的一列受到a限制时最大宽度，无论它是否也有百分比值（比如说30％），调整大小（使窗口变大），第二列（70％）当然直到边缘才会运行

这是因为左栏上的max-width。当它达到150px时，它不会进一步扩展，150px会小于您指定的30%。这将在右栏上留下差异，因为它仅限于70%。

要解决此问题，您必须在第二列上指定min-width，并计算宽度，该差值为100%减去150px（的留下一个）。

像这样：

.rowholder {
    ...
    min-width: 70%;
    width: calc(100% - 150px);
}

你的小提琴：https://jsfiddle.net/abhitalks/eh9h6etw/17/

<强>段：

＆＃13;

.main { float: left; width: 100%; background-color: yellow; }
.rowholder {
    background-color: cyan; float: left;
    min-width: 70%;
    width: calc(100% - 150px);
}
.image {
    background-color: orange; float: left; height: 150px;
    max-width: 150px; width: 30%;
}
.row { background-color: blue; clear: both; float: left; width: 100%; }

＆＃13;

<div class="main">
    <div class="image"></div>
    <div class="rowholder">
        <div class="row">Helow this is the heading</div>
        <div class="row"> this is the second row</div>
    </div>
</div>

＆＃13;

Answer 2

您必须删除max-width:150px;，因为您设置的值高于width，而不是max-width ...最大宽度为150px，width:30%更多超过150px。所以你的代码应该是这样的

.rowholder
{
    background-color: cyan;
    float: left;
    width:85%;
}

和

.image
{
    background-color: orange;
    float: left;
    height: 150px;
    width:15%;
}

之后，如果您要应用某些图像，则必须根据图像的高度和宽度调整百分比。

将max-width限制元素与使用百分比的元素混合

2 个答案: