html - 使内部 div 占据外部响应式 div 的 100%( float 问题)

Question

这有点难以解释，所以我做了一个 fiddle :

https://jsfiddle.net/8wujkpqb/

我有一个设置了最大宽度的右侧 float div。我需要其中的 div 占据最大宽度的 100%，以便内容可以与下面的 div 中的内容左对齐。

<div class="container">
<div class="mainleft">
    <div class="outer-red">
        <div class="first">
            I need this<br/> pushed to the left<br/> to align with the<br/> lower text but still<br/> be in a "max-width"<br/> container floating right.
        </div>
        <div class="clear"></div>
    </div>

    <div class="outer-gray">
        <div class="second">
            this is fine because there is enough content to take up the max-width. this is fine because there is enough content to take up the max-width. this is fine because there is enough content to take up the max-width
        </div>
        <div class="clear"></div>
    </div>
</div>

<div class="mainright">
    <div class="right-content">
        content
    </div>
</div>
<div class="clear"></div>

CSS

.container {
width: 100%;
}

.mainleft {
width: 50%;
float: left;
}

.mainright {
width: 50%;
float: left;
}

.outer-red {
width:100%;
background: red;
padding: 40px;
box-sizing:border-box;
}

.outer-gray {
width:100%;
background: gray;
padding: 40px;
box-sizing:border-box;
}


.first {
float: right;
max-width:250px;
clear:both;
}

.second {
float: right;
max-width:250px;
}

.right-content {
width:100%;
background: blue;
padding: 40px;
box-sizing:border-box;
}

.clear {
clear: both;
}

https://jsfiddle.net/8wujkpqb/

非常感谢任何帮助!

Answer 1

只需将另一个 div 添加到拥有 max-width 的“第一个”容器中，并让父级成为左对齐内部容器所需的大小。像这样

.first {
    float: right;
    max-width: 100%;
    clear:both;
    width: 200px
}

.inner {
    max-width: 200px
}

https://jsfiddle.net/8wujkpqb/1/