Question

这有点难以解释所以我做了一个小提琴：

我有一个正确的浮动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

只需在您的＆＃34;第一个＆＃34;中添加另一个div拥有max-width的容器，并让父元素为左对齐内容器所需的大小。像这样

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

.inner {
    max-width: 200px
}

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

使内部div占据外部响应div的100％（浮动问题）

1 个答案: